Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(e2e): playwright base setup #208

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@ on:
schedule:
- cron: "0 0 * * *"
push:
branches:
- master
branches: [master, main]
tags:
- "v*"
pull_request:
Expand Down
148 changes: 148 additions & 0 deletions .github/workflows/e2e.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
name: e2e
on:
workflow_run:
workflows:
- ci
types:
- completed

env:
TERM: xterm
GO_VERSION: 1.21

jobs:
playwright-run:
runs-on: ubuntu-latest
if: ${{ github.event.workflow_run.conclusion == 'success' }}
services:
postgres:
image: mattermostdevelopment/mirrored-postgres:12
env:
POSTGRES_USER: mmuser
POSTGRES_PASSWORD: mostest
POSTGRES_DB: mattermost_test
POSTGRES_HOST_AUTH_METHOD: trust
ports:
- 5432:5432
options: >-
--health-cmd pg_isready
--health-interval 10s
--health-timeout 5s
--health-retries 5
inbucket:
image: mattermost/inbucket:release-1.2.0
ports:
- 10080:10080
- 10110:10110
- 10025:10025
mattermost-server:
image: mattermostdevelopment/mattermost-enterprise-edition:master
env:
DB_HOST: postgres
DB_PORT_NUMBER: 5432
MM_DBNAME: mattermost_test
MM_USERNAME: mmuser
MM_PASSWORD: mostest
CI_INBUCKET_HOST: inbucket
CI_INBUCKET_PORT: 10080
IS_CI: true
MM_SERVICEENVIRONMENT: test
MM_CLUSTERSETTINGS_READONLYCONFIG: false
MM_EMAILSETTINGS_SMTPSERVER: inbucket
MM_EMAILSETTINGS_SMTPPORT: 10025
MM_PLUGINSETTINGS_ENABLEUPLOADS: true
MM_PLUGINSETTINGS_AUTOMATICPREPACKAGEDPLUGINS: false
MM_SERVICESETTINGS_SITEURL: http://localhost:8065
MM_SQLSETTINGS_DATASOURCE: "postgres://mmuser:mostest@postgres:5432/mattermost_test?sslmode=disable&connect_timeout=10"
MM_SQLSETTINGS_DRIVERNAME: postgres
ports:
- 8065:8065
env:
MM_SERVICESETTINGS_SITEURL: http://localhost:8065
MM_ADMIN_EMAIL: [email protected]
MM_ADMIN_USERNAME: sysadmin
MM_ADMIN_PASSWORD: Sys@dmin-sample1
steps:
- name: ci/checkout-repo
uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1

- name: ci/setup-go
uses: actions/setup-go@0c52d547c9bc32b1aa3301fd7a9cb496313a4491 # v5.0.0
with:
go-version: "${{ env.GO_VERSION }}"
cache: true

- name: ci/setup-node
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with:
node-version-file: ".nvmrc"

- name: ci/create-admin-user
run: |
STATUSCODE=$(curl -X POST -H "Content-Type: application/json" -d '{"email": "'${MM_ADMIN_EMAIL}'", "username": "'${MM_ADMIN_USERNAME}'", "password": "'${MM_ADMIN_PASSWORD}'"}' ${MM_SERVICESETTINGS_SITEURL}/api/v4/users -w "%{http_code}" -o /dev/stderr)
if test $STATUSCODE -ne 201; then exit 1; fi

- name: ci/install-go-dependencies
run: go mod tidy

- name: ci/install-plugin-webapp-deps
run: cd webapp && npm ci

- name: ci/build-and-install-plugin
run: make deploy

- name: ci/checkout-mattermost
run: |
git clone https://github.com/mattermost/mattermost.git ../mattermost
Copy link
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
Member 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.


- name: ci/setup-node-for-mattermost
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with:
node-version-file: "../mattermost/.nvmrc"

- name: ci/install-mattermost-webapp-deps
run: |
cd ../mattermost/webapp
npm ci

- name: ci/install-mattermost-playwright-deps
run: |
cd ../mattermost/e2e-tests/playwright
npm ci

- name: ci/setup-node-for-plugin-e2e
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
with:
node-version-file: "e2e/.nvmrc"

- name: ci/install-plugin-e2e-deps
run: |
cd e2e
npm ci

- name: ci/check
run: |
cd e2e
npm run check

- name: ci/run-e2e-tests
run: |
cd e2e
npm run test-ci
env:
CI: true
NODE_OPTIONS: '--no-experimental-fetch'
PW_ENSURE_PLUGINS_INSTALLED: com.mattermost.plugin-starter-template
Copy link
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
Member 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.


- name: ci/move-artifacts
if: success() || failure()
run: |
cd e2e
mkdir results
mv playwright-report results

- uses: actions/upload-artifact@26f96dfa697d77e81fd5907df203aa23a56210a8 # v4.3.0
if: success() || failure()
with:
name: test-results
path: e2e/results
Copy link
Member 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.

3 changes: 3 additions & 0 deletions e2e/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
playwright-report
test-results
5 changes: 5 additions & 0 deletions e2e/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"]
}
7 changes: 7 additions & 0 deletions e2e/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
node_modules/
/playwright/.cache/
.env
screenshots
playwright-report
test-results
.eslintcache
1 change: 1 addition & 0 deletions e2e/.nvmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
20.11
Copy link
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
Member 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.

5 changes: 5 additions & 0 deletions e2e/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
package.json
package-lock.json
playwright-report
storage_state
6 changes: 6 additions & 0 deletions e2e/.prettierrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"bracketSpacing": false,
"printWidth": 120,
"singleQuote": true,
"tabWidth": 4
}
Copy link
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
Member Author

Choose a reason for hiding this comment

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

Yup, sounds good.

41 changes: 41 additions & 0 deletions e2e/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
### Setup your environment

In order to get your environment set up to run [Playwright](https://playwright.dev) tests, you can run `./setup-environment`, or run equivalent commands for your current setup.

What this script does:

- Navigate to the folder above `mattermost-plugin-starter-template`
- Clone `mattermost` (if it is already cloned there, please have a clean git index to avoid issues with conflicts)
- Install webapp dependencies - `cd mattermost/webapp && npm i`
- Install Playwright test dependencies - `cd ../e2e-tests/playwright && npm i`
- Install plugin e2e dependencies - `cd ../../../mattermost-plugin-starter-template/e2e && npm i`
- Build and deploy plugin - `make deploy`

---

### Run the tests

Start Mattermost server:

- `cd <path>/mattermost/server`
- `make test-data`
hanzei marked this conversation as resolved.
Show resolved Hide resolved
- `make run-server`

Run test:

- `cd <path>/mattermost-plugin-starter-template/e2e`
- `npm run test` to run in multiple projects such as `chrome`, `firefox` and `ipad`.
- `npm run test -- --project=chrome` to run in specific project such as `chrome`.

To see the test report:

- `cd <path>/mattermost-plugin-starter-template/e2e`
- `npm run show-report` and navigate to link provided

To see test screenshots:

- `cd <path>/mattermost-plugin-starter-template/e2e/screenshots`

### Have questions or wanted to connect?

If you have any questions or need assistance, feel free to join and start a discussion at the [QA: Contributors channel](https://community.mattermost.com/core/channels/qa-contributors). It's a good place to connect with Mattermost staff and the wider community.
Loading