From b59824cfab9d4b320ab66bec3a405b1c671aaabd Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Tue, 4 Jun 2024 12:27:00 +0000 Subject: [PATCH 1/8] Run browser tests in a Docker container --- README.md | 10 ++++++++++ docker-compose.yml | 11 ++++++++++- package.json | 2 +- wdio.local.conf.js | 7 ++++++- 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 95a75993..a29018eb 100644 --- a/README.md +++ b/README.md @@ -71,3 +71,13 @@ Backend api mocks live in `/src/backend/mocks/default_handlers.js`. **Note** Firefox blocks service workers as long as we use `localhost` for local development. The only solution is to use chrom(ium) for now. + +### Running browser tests + +```sh +rm -r node_modules +docker compose run ui npm install +docker compose --profile browser-tests up -d +docker compose exec -it ui npm run test:e2e +docker compose --profile browser-tests down +``` diff --git a/docker-compose.yml b/docker-compose.yml index 34ffcb55..55d252cf 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,4 +1,5 @@ version: '3.3' + services: ui: env_file: @@ -8,6 +9,14 @@ services: working_dir: /home/node/app volumes: - ./:/home/node/app - command: npm run serve -- --port 8081 + command: npm run serve -- --port 8081 --host ui ports: - 8081:8081 + + selenium-firefox: + profiles: [browser-tests] + image: selenium/standalone-firefox:4.21.0 + shm_size: 2gb + ports: + - 4444:4444 + - 7900:7900 diff --git a/package.json b/package.json index 17e9a5fa..4c4a727a 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", - "test:e2e": "vue-cli-service test:e2e", + "test:e2e": "vue-cli-service test:e2e --baseUrl=http://ui:8081/", "lint": "vue-cli-service lint" }, "dependencies": { diff --git a/wdio.local.conf.js b/wdio.local.conf.js index 77a8eff6..cae771a0 100644 --- a/wdio.local.conf.js +++ b/wdio.local.conf.js @@ -9,13 +9,18 @@ exports.config = { * config for local testing */ maxInstances: 1, - services: ['geckodriver'], + hostname: 'selenium-firefox', + port: 4444, + path: '/wd/hub', capabilities: [ { browserName: 'firefox', 'moz:firefoxOptions': { args: ['-headless'] }, + 'alwaysMatch': { + 'moz:debuggerAddress': true + } } ] } From 9a35be69b11af18878141df204716dfdf467ecd6 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Tue, 4 Jun 2024 12:46:36 +0000 Subject: [PATCH 2/8] Update GitHub actions --- .github/workflows/browser-tests.js.yml | 16 ++++++++++++++++ .github/workflows/node.js.yml | 1 - 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 .github/workflows/browser-tests.js.yml diff --git a/.github/workflows/browser-tests.js.yml b/.github/workflows/browser-tests.js.yml new file mode 100644 index 00000000..70518869 --- /dev/null +++ b/.github/workflows/browser-tests.js.yml @@ -0,0 +1,16 @@ +name: Browser tests + +on: + push: + branches: [ main ] + pull_request: + +jobs: + browser-tests: + runs-on: ubuntu-latest + timeout-minutes: 10 + steps: + - uses: actions/checkout@v4.1.6 + - run: docker compose run ui npm install + - run: docker compose --profile browser-tests up -d + - run: docker compose exec -it ui npm run test:e2e diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 30627d88..550318f2 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -28,4 +28,3 @@ jobs: - run: npm run build --if-present - run: npm run lint -- --no-fix - run: npm run test:unit - - run: npm run test:e2e From de2a70204861c50330d959af79bf5a72d0045e80 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Tue, 4 Jun 2024 12:51:50 +0000 Subject: [PATCH 3/8] Copy environment for GitHub action --- .github/workflows/browser-tests.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/browser-tests.js.yml b/.github/workflows/browser-tests.js.yml index 70518869..3e17c5cd 100644 --- a/.github/workflows/browser-tests.js.yml +++ b/.github/workflows/browser-tests.js.yml @@ -11,6 +11,7 @@ jobs: timeout-minutes: 10 steps: - uses: actions/checkout@v4.1.6 + - run: cp .env.development.prod .env - run: docker compose run ui npm install - run: docker compose --profile browser-tests up -d - run: docker compose exec -it ui npm run test:e2e From a8921f418fa1fc6cbad7a16f61f776b467fafc22 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Tue, 4 Jun 2024 13:03:30 +0000 Subject: [PATCH 4/8] Update workspace ownership for GitHub action --- .github/workflows/browser-tests.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/browser-tests.js.yml b/.github/workflows/browser-tests.js.yml index 3e17c5cd..b763f52c 100644 --- a/.github/workflows/browser-tests.js.yml +++ b/.github/workflows/browser-tests.js.yml @@ -12,6 +12,7 @@ jobs: steps: - uses: actions/checkout@v4.1.6 - run: cp .env.development.prod .env + - run: chown -R 1000:1000 ${GITHUB_WORKSPACE} - run: docker compose run ui npm install - run: docker compose --profile browser-tests up -d - run: docker compose exec -it ui npm run test:e2e From 6a4dc460c3fa92ecd53a5da96087c4e21c8f1509 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Wed, 5 Jun 2024 08:10:34 +0000 Subject: [PATCH 5/8] Execute chown as root --- .github/workflows/browser-tests.js.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/browser-tests.js.yml b/.github/workflows/browser-tests.js.yml index b763f52c..4ec03f74 100644 --- a/.github/workflows/browser-tests.js.yml +++ b/.github/workflows/browser-tests.js.yml @@ -12,7 +12,7 @@ jobs: steps: - uses: actions/checkout@v4.1.6 - run: cp .env.development.prod .env - - run: chown -R 1000:1000 ${GITHUB_WORKSPACE} + - run: sudo chown -R 1000:1000 ${GITHUB_WORKSPACE} - run: docker compose run ui npm install - run: docker compose --profile browser-tests up -d - run: docker compose exec -it ui npm run test:e2e From fa6724c9a5ec12e50af1989fd008ce43ad19f067 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Wed, 5 Jun 2024 08:43:47 +0000 Subject: [PATCH 6/8] Send logs to stdout --- wdio.local.conf.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/wdio.local.conf.js b/wdio.local.conf.js index cae771a0..1c8b5740 100644 --- a/wdio.local.conf.js +++ b/wdio.local.conf.js @@ -8,6 +8,8 @@ exports.config = { /** * config for local testing */ + logLevel: 'debug', + outputDir: '', maxInstances: 1, hostname: 'selenium-firefox', port: 4444, From c07ea1db308c2a2ffb5108542d06bbfaa69d2dcb Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Wed, 5 Jun 2024 09:04:54 +0000 Subject: [PATCH 7/8] Wait for containers to spin up --- .github/workflows/browser-tests.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/browser-tests.js.yml b/.github/workflows/browser-tests.js.yml index 4ec03f74..575a8a8b 100644 --- a/.github/workflows/browser-tests.js.yml +++ b/.github/workflows/browser-tests.js.yml @@ -15,4 +15,5 @@ jobs: - run: sudo chown -R 1000:1000 ${GITHUB_WORKSPACE} - run: docker compose run ui npm install - run: docker compose --profile browser-tests up -d + - run: sleep 25 - run: docker compose exec -it ui npm run test:e2e From a6c2055375f32ae5536c9c4e0b8265fc1dbbec10 Mon Sep 17 00:00:00 2001 From: Andrew Kostka Date: Wed, 5 Jun 2024 09:39:49 +0000 Subject: [PATCH 8/8] Add Docker healthchecks --- .github/workflows/browser-tests.js.yml | 3 +-- docker-compose.yml | 8 ++++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.github/workflows/browser-tests.js.yml b/.github/workflows/browser-tests.js.yml index 575a8a8b..ff808aa1 100644 --- a/.github/workflows/browser-tests.js.yml +++ b/.github/workflows/browser-tests.js.yml @@ -14,6 +14,5 @@ jobs: - run: cp .env.development.prod .env - run: sudo chown -R 1000:1000 ${GITHUB_WORKSPACE} - run: docker compose run ui npm install - - run: docker compose --profile browser-tests up -d - - run: sleep 25 + - run: docker compose --profile browser-tests up -d --wait - run: docker compose exec -it ui npm run test:e2e diff --git a/docker-compose.yml b/docker-compose.yml index 55d252cf..a197add3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -12,6 +12,10 @@ services: command: npm run serve -- --port 8081 --host ui ports: - 8081:8081 + healthcheck: + test: curl --fail http://ui:8081 || exit 1 + interval: 5s + start_period: 0s selenium-firefox: profiles: [browser-tests] @@ -20,3 +24,7 @@ services: ports: - 4444:4444 - 7900:7900 + healthcheck: + test: curl --fail http://selenium-firefox:4444 || exit 1 + interval: 5s + start_period: 0s