playwright

Playwright is easy to install and start to work with. Just have to create a fresh project and install the playwright as a dependency.

 

Create a new project

$ npm init -y

2. Install Playwright

 

$ npm install — save-dev playwright

3. Choosing Typescript as the scripting language

 

$ npm install — save-dev typescript

Typescript config in “tsconfig.json“

 

{

  "compilerOptions": {

    "target": "es6",

    "lib": ["dom", "dom.iterable", "esnext"],

    "strict": true,

    "module": "commonjs",

    "noEmit": true

  },

  "include": ["src"]

}

** As per config, we should add all tests & other classes inside of the “src/” folder

 

4. Add Jest as the test runner

 

$ npm install — save-dev jest

As we using typescript in the project

 

$ npm install — save-dev ts-jest @types/jest

For configuration between jest & playwright

 

$ npm install — save-dev jest-playwright-preset

5. Set up Jest Config & test config with package.json

 

jest.config.js

 

module.exports = {

    preset: "jest-playwright-preset",

    testMatch: ["**/__tests__/**/*.+(ts|js)", "**/?(*.)+(spec|test).+(ts|js)"],

    transform: {

      "^.+\\.(ts)$": "ts-jest",

    },

    testTimeout: 20000,

    testEnvironmentOptions: {

      "jest-playwright": {

       browsers: [ "chromium", "firefox"],

        launchOptions: {

        //headless: false,

       // slowMo: 600,

        }

      }

    },

  };

preset — Integration with jest & playwright

testMatch — spec pattern that need to be run

transform — typescript test compatible with jest

testTimeout — global test timeout

testEnvironmentOptions — test specific more configurations [browsers — Multiple browsers that tests should be running in, launchOptions — browser launch options. can use to make tests headless and slow down test progress] More configs: https://jestjs.io/docs/en/configuration

package.json

 

"scripts": {

    "test": "jest --detectOpenHandles",

    "test.watch": "jest --watchAll"

  },

  "devDependencies": {

    "@types/jest": "^26.0.19",

    "jest": "^26.6.3",

    "jest-junit": "^12.0.0",

    "jest-playwright-preset": "^1.4.3",

    "playwright": "^1.7.1",

    "ts-jest": "^26.4.4",

    "typescript": "^4.1.3"

  }

scripts — Define your testing scripts to run with “npm“

With this config tests can be run as:

 

$ npm test

For running a specific test file give its file path

 

$ npm test src/specs/login.test.js

6. Add Junit reporter for framework

 

Integrated jest JUnit reporter to generate xml report. There are many other reporters available to integrate with jest for better reporting: https://github.com/jest-community/awesome-jest#reporters

 

$ npm i — save-dev jest-junit-reporter

Add reporter config in “jest.config.js“

 

reporters: [

      "default",

        [

          "jest-junit",

           {

            classNameTemplate: (vars) => {

              return vars.classname.toUpperCase();

            },

            "outputDirectory": "reports",

            "outputName": "test_report.xml"

          }

        ]

    ]

jest-junit — Define test report configs

outputDirectory — Define location to create reports

outputName — Test report name

Extra — Debug settings with vscode IDE

 

While debugging tests will be timeout with 10s default timeout. To avoid that, can have specific configs to define debug settings in jest.

 

create debug settings file jest.debug-setup.js

jest.setTimeout(1000000);

2. Point debug setup file through vscode code settings (.vscode > launch.json)

 

{

    "version": "0.2.0",

    "configurations": [

    {

        "name": "Debug Jest Tests",

        "type": "node",

        "request": "launch",

        "program": "${workspaceFolder}/node_modules/.bin/jest",

        "args": ["--runInBand", "--setupFilesAfterEnv='${workspaceFolder}/jest.debug-setup.js'"],

        "windows": {

          "program": "${workspaceFolder}/node_modules/jest/bin/jest"

        },

        "console": "integratedTerminal",

        "internalConsoleOptions": "neverOpen"

      }

    ]

  }

— setupFilesAfterEnv use this param to point debug settings file

 

Project Structure

 

<Project_Name>

   |__ src

       |__ specs <Test cases>

       |__ models <For handling page objects>

       |__ helper <Supporting classes>

       |__ enums <Constants used for project>

   |__ report

   |__ config.json

   |__ jest.config.js

   |__ jest.debug-setup.js

   |__ package.json

   |__ tsconfig.json

Sample test case

 

Jest provides global test objects Page, BrowserContext, Browser etc. Hence created a global test file to manage common objects.

 

globalTypes.ts

 

import { Browser, Page } from "playwright";

declare global {

  const browser: Browser;

  const page: Page;

  const browserName: string;

}

google.search.test.ts

 

describe(`Google Test Case`, () => {

  it("returns successful search", async () => {

    await page.goto("https://www.google.com/");

    // Click input[aria-label="Search"]

    await page.click('input[aria-label="Search"]');

    // Fill input[aria-label="Search"]

    await page.fill('input[aria-label="Search"]', "tesla");

    // Press Enter

    await page.press('input[aria-label="Search"]', "Enter");

    // Close page

    await page.close();

  });

});