Advanced Playwright Typescript Project - CI/CD - Allure

Robust Framework for Real Websites with Best Practices, Stateless pages, CI/CD, Allure report hosting and more Advanced Playwright Typescript Project - CI/CD - Allure

In the fast-paced world of web development, it is crucial to ensure the stability, reliability, and quality of our applications. This is particularly true for projects built with Playwright, a popular testing framework for automating end-to-end tests across various browsers. To achieve this, developers often adopt Continuous Integration and Continuous Deployment (CI/CD) practices along with test reporting tools like Allure. In this article, we will explore an advanced Playwright TypeScript project that incorporates CI/CD pipelines and utilizes Allure for comprehensive test reporting.

I. Setting Up the Project

To begin, let's set up the basic structure of our Playwright TypeScript project. First, ensure that Node.js and npm are installed on your machine. Create a new directory for your project and initialize it with npm:

shell
$ mkdir playwright-project
$ cd playwright-project
$ npm init -y

Next, we'll install the required dependencies for our project:

ruby
$ npm install playwright @types/playwright typescript ts-node tsconfig-paths --save-dev

Now, let's create a tsconfig.json file to configure TypeScript:

json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "baseUrl": ".",
    "paths": {
      "*": ["node_modules/*", "src/types/*"]
    }
  }
}

II. Writing Playwright Tests

With the project structure in place, let's write some Playwright tests in TypeScript. Create a src folder at the root of your project and inside it, add a new file named example.test.ts.

typescript
import { test, expect } from '@playwright/test';

test('Example Test', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example Domain');
});

III. Configuring Playwright Test Runner

To execute our tests, we need to configure the Playwright Test Runner. Create a new file named playwright.config.ts in the project root:

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

const config: PlaywrightTestConfig = {
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
  },
};

export default config;

IV. Integrating CI/CD

Now that we have our tests set up locally, let's integrate CI/CD pipelines to automate testing and deployment. We will use popular CI/CD service providers like GitHub Actions or GitLab CI/CD. For demonstration purposes, we'll use GitHub Actions.

1. Create a .github/workflows/main.yml file in your project root:

yaml
name: CI/CD

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

This workflow will trigger on every push to the main branch, install the project's dependencies, and run the tests using the npm test command.

V. Allure Test Reporting

While Playwright provides detailed logs, integrating Allure test reporting can provide a more visually appealing and informative test report. Let's add Allure to our project.

1. Install the required Allure packages:

ruby
$ npm install @wdio/allure-reporter @wdio/allure-environment --save-dev

2. Modify the playwright.config.ts file to include the Allure reporter:

typescript
import { PlaywrightTestConfig } from '@playwright/test';
import { reporter } from '@wdio/allure-reporter';

const config: PlaywrightTestConfig = {
  // ... (existing configurations)

  // Add the reporter option
  reporter: [reporter],
};

export default config;

VI. Generating Allure Reports

After running the tests, we need to generate the Allure report and make it accessible. We'll use another GitHub Action for this purpose. Add the following step to the .github/workflows/main.yml file:

yaml
      - name: Generate Allure Report
        run: npx allure generate --clean && npx allure open

This step will generate the Allure report and open it in your default browser after the tests are run.

Conclusion

In this article, we explored an advanced Playwright TypeScript project incorporating CI/CD pipelines and Allure test reporting. We set up the project, wrote Playwright tests in TypeScript, integrated CI/CD pipelines with GitHub Actions, and added Allure for comprehensive test reporting. With this setup, developers can ensure the stability and quality of their Playwright projects while getting valuable insights into test results through detailed Allure reports. Happy testing and automating your end-to-end tests with Playwright!

Learn More