Gitlab-ci: job for E2E tests with Playwright

gitlab-ci.yml

stages:
  - install
  - build
  - deploy
  - e2e

test_e2e:
  stage: e2e
  allow_failure: false
  image: mcr.microsoft.com/playwright:focal
  before_script:
    - cd playwright
    - npm i
    - npx playwright install
  script:
    - npm run test:all-ci # npm script is: "test:all-ci": "playwright test --project 'chrome'",
  after_script:
    - >
      if [ $CI_JOB_STATUS == 'failed' ]; then
        echo -e "At least one test suite has failed, returning \e[31mRed\e[39m"
        echo "   _____                       _    "
        echo "  |  __ \                     | |   "
        echo "  | |__) |___ _ __   ___  _ __| |_  "
        echo "  |  _  // _ \ '_ \ / _ \| '__| __| "
        echo "  | | \ \  __/ |_) | (_) | |  | |_  "
        echo "  |_|  \_\___| .__/ \___/|_|   \__| "
        echo "             | |                    "
        echo "             |_|                    "
        echo "Go check test results here:"
        echo "$CI_JOB_URL/artifacts/file/playwright/out/report/index.html"
      fi
  cache:
    key: ${CI_COMMIT_REF_SLUG}-e2e
    paths:
      - playwright/node_modules
  artifacts:
    paths:
      - playwright/out/report/
    when: on_failure
    reports:
      junit: playwright/out/report/report.xml

playwright.config.ts

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: 'tests',
  outputDir: 'out/test-results',
  [...]
  reporter: [
    ['html', { outputFolder: 'out/report', open: 'never' }],
    ['junit', { outputFile: 'out/report/report.xml' }]
  ]
};
export default config;

tree-structure.txt

.
├── node_modules
├── src
│
├── playwright
│   ├── node_modules
│   ├── tests
│   ├── playwright.config.ts
│   └── package.json
│
├── package.json
└── any_other_file_or_folder_of_your_app