Hi there, Today I want to speak about integrating Playwright in your GitHub action CI. So don't waste time and let's start. To start, you have to create a file called in this path . playwright.yml .github/workflows The ' path is used to save the files for your GitHub Actions, and the name of the file is not important for GitHub because the value for it is inside of your files. .github/workflows Let's start to copy and paste this code into the playwright.yml name: Playwright Tests
on: [push] These two info are used to give a name to the CI and to define what triggers this CI.These are standard fields that you can find in every GitHub Action in the world.In this case, the CI will trigger every push in the project. Now it's time to add the first job to run your e2e tests in CI.To do that, add this to your file. jobs:
  test-e2e:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-e2e-report
          path: playwright-report/
          retention-days: 30 Jobs are used in GitHub Action to run different stuff, like build, test, deploy etc. etc.In this example, the 's job creates a list of steps to run the test in the CI.But what this job does: test-e2e is used to indicate on which platform the job has to run runs-on checkouts the code actions/checkout@v3 setups the node version for the job actions/setup-node@v3 installs all the dependencies in the Install dependencies node_modules installs the browsers for Playwright Install Playwright Browsers runs the e2e tests Run Playwright tests uploads the test's results in the GitHub Artifact actions/upload-artifact@v3 Ok, this is the job for the e2e tests; now it's time to add the job for the component tests.To do that, copy and paste the following code test-ct:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright Browsers
        run: npx playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test -c playwright-ct.config.ts
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-ct-report
          path: playwright-report/
          retention-days: 30 As you can see, it's similar to the previous job but has different configurations, so I don't dive into it.Now with these two jobs, you have a CI ready to run.To do that, + + , and go into your online GitHub repository. In the tab Actions, you can find your CI in action, and If you click on it, you can see the two jobs running. (It's important to understand that these two jobs run in parallel, you can find more info about job execution ) git add git commit git push here When the CI is ended, you are sure that your tests are ok as expected. And the result will be like this. Perfect, now you have your first GitHub action configured to run your tests with Playwright. Good, that's all folk, I think you have all the info to integrate Playwright in your CI without any problem. Thank you and see you soon. Bye Bye 👋 The code of this post is available . here Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

How to Use Mock API in Playwright

How to Use Components in Playwright

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How to Integrate Playwright in Your GitHub Action CI

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Understanding Visual Comparisons in Playwright

CI/CD Basics with Travis-CI

CI/CD for Android Guide: Bitbucket Pipelines and Gradle Play Publisher

Continuous Integration: An Essential Guide

How I Hacked a Gitlab Integration with Fastlane for Android

Understanding Visual Comparisons in Playwright

CI/CD Basics with Travis-CI

CI/CD for Android Guide: Bitbucket Pipelines and Gradle Play Publisher

Continuous Integration: An Essential Guide

How I Hacked a Gitlab Integration with Fastlane for Android

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps