How to incorporate Puppeteer E2E tests into GitLab CI pipeline?

I’m working on end-to-end tests using Chrome Puppeteer. Now I want to make these tests part of our development workflow. The goal is to run the tests automatically before each production deployment. If the tests pass, the deployment should continue. If they fail, the deployment should be stopped.

We use GitLab for our CI/CD pipeline. I’m not sure how to add my Puppeteer tests to the gitlab-ci.yml file. Can someone explain how to do this?

Here’s a simple example of what I’m trying to achieve:

stages:
  - test
  - deploy

puppeteer_tests:
  stage: test
  script:
    - npm install
    - npm run e2e-tests
  only:
    - main

deploy_to_production:
  stage: deploy
  script:
    - echo 'Deploying to production'
  only:
    - main
  when: on_success

Is this the right approach? How can I make sure the deployment stage only runs if the Puppeteer tests pass? Any tips or best practices would be really helpful. Thanks!

hey there! i’ve done this before. ur yaml looks good, but u might wanna add a image: node:latest to the puppeteer_tests job. also, make sure ur e2e-tests script in package.json is setup right. the when: on_success in ur deploy job should work fine to only run if tests pass. good luck!

Your approach is on the right track. To ensure smooth execution of Puppeteer tests in GitLab CI, consider using a Docker image with Chrome pre-installed. You can specify this in your puppeteer_tests job:

puppeteer_tests:
  image: alekzonder/puppeteer:latest
  stage: test
  script:
    - npm ci
    - npm run e2e-tests
  artifacts:
    when: always
    paths:
      - test-results/

This setup uses a Puppeteer-ready image, ensures dependencies are installed correctly with ‘npm ci’, and saves test results as artifacts. The ‘when: on_success’ in your deploy job will handle the conditional deployment based on test results. Remember to configure appropriate timeouts for your tests to avoid pipeline failures due to long-running tests.