Merge pull request #3194 from serlo/e2e-cleanup

chore(e2e): update playwright, update readmes

.github/workflows/e2e_tests.yaml

@@ -4,7 +4,8 @@ on:
   push:
     branches:
       - staging
-      - feat-e2e-tests
+      - e2e-**
+      - e2e/**
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -22,6 +23,7 @@ jobs:
           max_timeout: 1200
           check_interval: 20
       - run: yarn
+      - run: yarn playwright install --with-deps chromium
       - run: yarn e2e-workers
       - uses: actions/upload-artifact@v3
         if: failure()

.github/workflows/e2e_tests_firefox.yaml

@@ -4,7 +4,8 @@ on:
   push:
     branches:
       - staging
-      - feat-e2e-tests
+      - e2e-**
+      - e2e/**
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -22,6 +23,7 @@ jobs:
           max_timeout: 1200
           check_interval: 20
       - run: yarn
+      - run: yarn playwright install --with-deps firefox
       - run: yarn e2e-firefox tests/4*.ts
       - uses: actions/upload-artifact@v3
         if: failure()

README.md

@@ -3,6 +3,7 @@
 # serlo.org – Frontend
 
 Next.js app that serves [serlo.org](https://serlo.org).
+You can find it in `apps/web`.
 
 ## Overview
 
@@ -114,6 +115,21 @@ Technical issues are opened for bugs and feature that we decided to work on. For
 
 This method should avoid stale issues and make it possible to keep an "zero inbox".
 
+## e2e testing
+
+This repo includes e2e test with codeceptjs.
+To run them for the first time:
+
+```sh
+cd e2e-tests
+yarn
+yarn playwright install
+cd ..
+yarn e2e
+```
+
+You can find the [full readme here](https://github.com/serlo/frontend/tree/staging/e2e-tests#readme).
+
 ## More information
 
 You can find more detailed explanations in our wiki. Currently, we have these pages available:

e2e-tests/README.md

@@ -1,15 +1,16 @@
-# frontend-e2e-tests
+# @serlo/e2e-tests
 
 integration tests for serlo.org
 
 ```sh
-git clone https://github.com/serlo/frontend-e2e-tests.git
-cd frontend-e2e-tests
+cd e2e-tests
 yarn
-yarn test
+yarn playwright install
+cd ..
+yarn e2e
 ```
 
-output should look something like that:
+The output should look something like that:
 
 ![grafik](https://user-images.githubusercontent.com/13507950/210520199-ad502693-8f84-4956-9417-f750a243911d.png)
 
@@ -18,25 +19,25 @@ Tests are written with Playwright (wrapped by CodeceptJS), extensive documentati
 To run a single test, use `--grep`:
 
 ```sh
-yarn test --grep "Quickbar"
+yarn e2e --grep "Quickbar"
 ```
 
 You can also run a single file:
 
 ```sh
-yarn test tests/000-general.ts
+yarn e2e tests/000-general.ts
 ```
 
 Run all editor tests:
 
 ```sh
-yarn test tests/4*.ts
+yarn e2e tests/4*.ts
 ```
 
 You can run tests on firefox instead of chromium with
 
 ```sh
-yarn test-firefox
+yarn e2e-firefox
 ```
 
 The tests are written in `/tests`, the file names are setting the order of execution. The browser session is stored between tests, TypeScript is supported.

e2e-tests/codecept.config.ts

@@ -29,7 +29,6 @@ exports.config = {
         : { browser }),
     },
   },
-  name: 'frontend-e2e-tests',
   plugins: {
     // https://codecept.io/locators/#custom-locators
     customLocator: {
@@ -66,7 +65,7 @@ exports.config = {
         },
       },
     },
-    pauseOnFail: {},
+    ...(isCI ? {} : { pauseOnFail: {} }),
     retryFailedStep: {
       enabled: true,
     },

e2e-tests/package.json

@@ -12,12 +12,12 @@
   },
   "devDependencies": {
     "@types/node": "^18.16.19",
-    "codeceptjs": "3.5.2",
+    "codeceptjs": "3.5.5",
     "cross-env": "^7.0.3",
     "dotenv": "^16.3.1",
-    "playwright": "1.36.0",
+    "playwright": "^1.40.1",
     "ts-node": "^10.9.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.3.3"
   },
   "packageManager": "[email protected]",
   "engines": {

e2e-tests/tests/000-general.ts

@@ -171,7 +171,7 @@ Scenario('Donation', ({ I }) => {
   I.switchTo('iframe')
   I.waitForText('Bitte gib einen Spendenbetrag ein', 30)
   I.click('Jetzt spenden')
-  I.see('Wähle eine Zahlungsart')
+  I.waitForText('Wähle eine Zahlungsart', 10)
   I.switchTo() // back from iframe
 
   I.amOnPage('/')

e2e-tests/tests/100-learners.ts

@@ -196,7 +196,7 @@ Scenario('Video + Injection', ({ I }) => {
   I.see('dass externe Inhalte von')
   I.click('Video abspielen von YouTube')
   I.switchTo('iframe')
-  I.see('Satz des Pythagoras für rechtwinklige Dreiecke')
+  I.seeElement('video')
 })
 
 Scenario('Toggle Solution', ({ I }) => {
@@ -229,7 +229,7 @@ Scenario('Taxonomy', ({ I }) => {
   I.click('2021')
 
   // Takes a long time to load
-  I.waitForText('Berechne', 30)
+  I.see('Berechne')
 
   I.amOnPage('/24370')
   I.see('Artikel')