Skip to content

feat(e2e): playwright base setup#208

Closed
saturninoabril wants to merge 2 commits into
masterfrom
e2e-base-setup
Closed

feat(e2e): playwright base setup#208
saturninoabril wants to merge 2 commits into
masterfrom
e2e-base-setup

Conversation

@saturninoabril

@saturninoabril saturninoabril commented Sep 19, 2024

Copy link
Copy Markdown

Summary

This is mainly based from the awesome works by @rahulsuresh-git and @mickmister at mattermost-community/mattermost-plugin-todo#228. Thanks to both of you!

This plugin template is used to get started in developing plugins for Mattermost, and to make it easier for the developers to write E2E tests, this PR introduces the base setup for Playwright with reference from the mattermost repo (here), taking advantage of the patterns/models/setup readily available from there.

Screenshot 2024-09-19 at 6 46 58 PM

@saturninoabril saturninoabril added the 2: Dev Review Requires review by a core committer label Sep 20, 2024

@hanzei hanzei left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @saturninoabril 🚀

Looking forward to more plugins with E2E tests!

Comment thread .github/workflows/e2e.yml

- name: ci/checkout-mattermost
run: |
git clone https://github.com/mattermost/mattermost.git ../mattermost

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use --depth here as well?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure, I'll use the actions/checkout for consistency with the default depth and branch.

Comment thread .github/workflows/e2e.yml
env:
CI: true
NODE_OPTIONS: '--no-experimental-fetch'
PW_ENSURE_PLUGINS_INSTALLED: com.mattermost.plugin-starter-template

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we extract the plugin ID programmatically?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest to do this manually. I'll add notes in addition to what files to edit in the README.

Comment thread e2e/.nvmrc
@@ -0,0 +1 @@
20.11

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The webapp code of the plugin still used node 16. (https://github.com/mattermost/mattermost-plugin-starter-template/blob/master/.nvmrc#L1)

I'm hesitant that the use of different node versions will cause pain for developers. Can we align the two versions?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be best to upgrade this matching the one being used at monorepo's webapp. However, I've seen issues in upgrading webapp's node version here and so it would be good to address separately.

Note that the Playwright from the monorepo uses a feature (native fetch) available from 18+ and so, use of outdated node 16 will not work.

I'll take a look at the options here.

Comment thread e2e/.prettierrc.json
"printWidth": 120,
"singleQuote": true,
"tabWidth": 4
}

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

0/5 should we use a global confirmation for all webapp node and not only the e2e code?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, sounds good.

Comment thread e2e/support/constant.ts
@@ -0,0 +1 @@
export const starterTemplatePluginId = 'com.mattermost.plugin-starter-template';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same question here. Can we extract the plugin ID?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same -- to do it manually with guides at the readme. This is base test only and will fail if not change.

Comment thread e2e/tests/basic.spec.ts
await systemConsolePage.page.getByRole('link', {name: 'Plugin Starter Template'}).click();

// # Enable the plugin
await page.getByTestId('PluginSettings.PluginStates.com+mattermost+plugin-starter-template.Enabletrue').check();

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above.

Comment thread .github/workflows/e2e.yml
Comment thread e2e/README.md
Comment thread e2e/setup-environment.sh
#!/bin/sh
echo "Clone mattermost"
cd ../../
git clone --depth 1 https://github.com/mattermost/mattermost.git

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happens if a plugin dev runs the script a second time? Does git pull the latest changes?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will fail in cloning the repo (remain as is and will not pull the latest) with the following log but will continue until the end.

fatal: destination path 'mattermost' already exists and is not an empty directory.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be nice if the script runs without an error and pulls the latest changes on a second run.

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, but some may prefer to avoid introducing unintended changes to the work they're currently doing in the monorepo. This script is intended solely for the initial setup to help users get started quickly. For subsequent steps, they can choose how they want to update their setup once they're more familiar with the dependencies.

Co-authored-by: Ben Schumacher <ben.schumacher@mattermost.com>
Comment thread .github/workflows/e2e.yml
if: success() || failure()
with:
name: test-results
path: e2e/results

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll move this as a reusable workflow at https://github.com/mattermost/actions-workflows. With that, I'm putting reviews on hold for now.

@saturninoabril saturninoabril added Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) and removed 2: Dev Review Requires review by a core committer labels Sep 24, 2024
@pavelzeman

Copy link
Copy Markdown

GIthub clean up - this has been opened for a while, are we still doing this?
Would it make sense to either close or move to Draft?

@saturninoabril

Copy link
Copy Markdown
Author

Thanks Pavel, and closing this PR for now.

@mattermost-build mattermost-build removed the Do Not Merge/Awaiting PR Awaiting another pull request before merging (e.g. server changes) label Apr 13, 2026
@saturninoabril
saturninoabril deleted the e2e-base-setup branch April 13, 2026 05:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants