How do I configure Playwright tests to run on CircleCI?

Answer

To run Playwright tests on CircleCI, follow these steps:

1. Create a configuration file: Create a .circleci directory in your project and add a config.yml file.

2. Define jobs: In config.yml, define two jobs: one for installing Playwright and its dependencies, and another for running the tests.

3. Use Node.js Docker image: For both jobs, use the circleci/node:14 or circleci/node:14-browsers Docker image.

4. Install Playwright: In the first job, install Playwright using npm ci.

5. Configure environment variables: In the second job, set PLAYWRIGHT_BROWSERS_PATH and PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD environment variables.

6. Run tests: In the second job, run your Playwright tests using npx playwright test.

7. Define a workflow: Combine the two jobs into a pipeline that runs on each push or pull request to the main/master branch.

Here's an example config.yml file:

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:14
    steps:
      - checkout
      - run: npm ci
  test:
    docker:
      - image: circleci/node:14-browsers
    environment:
      PLAYWRIGHT_BROWSERS_PATH: /usr/bin/playwright-browsers
      PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: true
    steps:
      - checkout
      - run: npm ci --production
        working_directory: ~/project/playwright/
        environment:
          NODE_ENVIRONMENT_VARIABLES_HERE_IF_NEEDED_FOR_INSTALLATION_OF_DEPENDENCIES
          # Example of how to set up env vars for installation of dependencies
          # ENV_VAR_1_NAME : $ENV_VAR_1_VALUE
          # ENV_VAR_2_NAME : $ENV_VAR_2_VALUE
  deploy_to_production_when_tests_pass_on_master_branch_only_and_not_pull_requests_or_other_branches:
    requires: [build, test]
    filters:
      branches:
        only: master
workflows:
  build-and-test-on-push-or-pull-request-to-master-branch-only-and-not-other-branches-or-pull-requests:
    jobs:
      - build
      - test:
          requires:
            - build
          filters:
            branches:
              only: master

Now, your Playwright tests will run on CircleCI whenever you push or create a pull request to the main/master branch.