Continuous Integration (CI) is a crucial practice in modern software development that involves automatically testing and building your code every time a change is made. This ensures that your codebase remains stable and that new changes do not introduce bugs. In this section, we will explore how to integrate Playwright tests into a CI pipeline.

1. Automated Testing: Automatically run tests to verify that the code works as expected.
2. Build Automation: Automatically compile and build the application to ensure that it can be deployed.
3. Version Control Integration: Use a version control system (e.g., Git) to track changes and trigger CI processes.
4. Feedback Loop: Provide immediate feedback to developers about the status of their code changes.

There are several CI services available, such as:

• GitHub Actions
• GitLab CI/CD
• Jenkins
• Travis CI
• CircleCI

For this example, we will use GitHub Actions due to its seamless integration with GitHub repositories.

1. Create a .github/workflows directory in the root of your repository if it doesn't exist.
2. Create a new file named playwright-ci.yml inside the .github/workflows directory.

Here is a basic example of a GitHub Actions workflow for running Playwright tests:

• Triggering Events: The workflow is triggered on push and pull_request events to the main branch.
• Job Definition: The test job runs on the latest Ubuntu environment.
• Steps:
  • Checkout Code: Uses the actions/checkout action to pull the code from the repository.
  • Set Up Node.js: Uses the actions/setup-node action to set up Node.js version 16.
  • Install Dependencies: Runs npm install to install project dependencies.
  • Run Playwright Tests: Executes npx playwright test to run the Playwright test suite.

Exercise: Set up a CI pipeline using GitHub Actions for a Playwright project.

1. Create a new GitHub repository and clone it to your local machine.
2. Initialize a new Node.js project and install Playwright.
3. Create a simple Playwright test script.
4. Set up a GitHub Actions workflow as described above.
5. Push your changes to GitHub and observe the CI process.

Solution:

1. Initialize Project:

   mkdir playwright-ci-example
   cd playwright-ci-example
   npm init -y
   npm install playwright
   

2. Create a Test Script:

   // tests/example.spec.ts
   const { test, expect } = require('@playwright/test');
   
   test('basic test', async ({ page }) => {
     await page.goto('https://example.com');
     const title = await page.title();
     expect(title).toBe('Example Domain');
   });
   

3. Set Up GitHub Actions:

   • Follow the steps outlined in the "Define the Workflow" section.

4. Push Changes:

   git init
   git add .
   git commit -m "Set up Playwright CI"
   git branch -M main
   git remote add origin <your-repo-url>
   git push -u origin main
   

5. Observe CI Process: Check the "Actions" tab in your GitHub repository to see the workflow run.

• Node.js Version: Ensure the Node.js version in your workflow matches the version used in your local development environment.
• Dependencies: Make sure all necessary dependencies are listed in your package.json and installed during the CI process.
• Environment Variables: If your tests require environment variables, configure them securely in your CI settings.

Integrating Playwright with a CI pipeline ensures that your tests are run automatically with every code change, providing immediate feedback and maintaining code quality. By following the steps outlined in this section, you can set up a robust CI process for your Playwright projects. In the next module, we will explore advanced TypeScript techniques to further enhance your testing capabilities.