Let’s Play Around With Playwright Framework

Playwright Test was mainly designed to meet the requirements of end-to-end testing. It performs all of the functions of a standard test runner and more. The playwright test enables you to do the following:

• Run tests across all browsers.
• Execute tests in parallel.
• Enjoy context isolation out of the box.
• Capture videos, screenshots and other artefacts on failure.
• Integrate your POMs as extensible fixtures.

Installation

Create an empty folder called “playwright_framework”. Then type the npm init -y to initialize the project.

Then install the following node module to start our testing.

#Playwright has its own end-to-end test runner, which we call Playwright Test.
npm i -D @playwright/test
# install supported browsers
npx playwright install

After the installation, you can see the package.json file as below:

{
  "name": "playwright_framework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.16.3"
  }
}

Write Our First Test

Create tests/demo.spec.js to define your test. Please note that I’m using WebStrom as my IDE. Then create the first test that will verify the text near the icon as follow:

const { test, expect } = require('@playwright/test'); 
test('demo test', async ({ page }) => {  
await page.goto('https://playwright.dev/');  
const title = page.locator('.navbar__inner .navbar__title');  
await expect(title).toHaveText('Playwright');});

Now, run your tests using the following command, assuming the test files are in the tests directory. Playwright Test just conducted a test in a headless mode using the Chromium browser.

npx playwright test
yaseen@342-MC-C02PPBQ5G8WN playwright_framework % npx playwright test
Running 1 test using 1 worker
✓  tests/demo.spec.js:3:1 › demo test (6s)
1 passed (7s)
yaseen@342-MC-C02PPBQ5G8WN playwright_framework %

Let us instruct it to utilize the headed browser:

npx playwright test --headed

Introduction To Configuration file

To enjoy all the features that Playwright Test offers, you would want to create a configuration file playwright.config.js.

const { devices } = require('@playwright/test');

const config = {
    forbidOnly: !!process.env.CI, //Whether to exit with an error if any tests or groups are marked as test.only(title, testFunction) or test.describe.only(title, callback). Useful on CI.
    retries: process.env.CI ? 2 : 0, //The maximum number of retry attempts given to failed tests.
    use: {
        trace: 'retain-on-failure', //Playwright Trace Viewer is a GUI tool that helps exploring recorded Playwright traces after the script ran. Record a trace for each test, but remove it from successful test runs.
    },
    projects: [
        {
            name: 'chromium',
            use: { ...devices['Desktop Chrome'] },
        },
        {
            name: 'firefox',
            use: { ...devices['Desktop Firefox'] },
        },
        {
            name: 'webkit',
            use: { ...devices['Desktop Safari'] },
        },
    ],
};

module.exports = config;

By default, tests should be conducted in various browsers.

yaseen@342-MC-C02PPBQ5G8WN playwright_framework % npx playwright test
Using config at /Users/yaseen/Desktop/Code Tutorials/playwright_framework/playwright.config.js
Running 3 tests using 3 workers
✓  [chromium] › tests/demo.spec.js:3:1 › demo test (4s)
  ✓  [firefox] › tests/demo.spec.js:3:1 › demo test (7s)
  ✓  [webkit] › tests/demo.spec.js:3:1 › demo test (13s)
3 passed (15s)

Use --project command-line option to run a single project.

yaseen@342-MC-C02PPBQ5G8WN playwright_framework % npx playwright test --project=firefox
Using config at /Users/yaseen/Desktop/Code Tutorials/playwright_framework/playwright.config.js
Running 1 test using 1 worker
✓  [firefox] › tests/demo.spec.js:3:1 › demo test (4s)
1 passed (5s)

Play With Assertions

For test assertions, the Playwright Test makes use of the expect library. It augments it with Playwright-specific matches to improve testing convenience.

const { test, expect } = require('@playwright/test');

test('demo test', async ({ page }) => {
    await page.goto('https://playwright.dev/');

    // Expect a title "to contain" a substring.
    await expect(page).toHaveTitle(/Playwright/);

    // Expect an attribute "to be strictly equal" to the value.
    await expect(page.locator('text=Get Started').first()).toHaveAttribute('href', '/docs/intro');

    // Expect an element "to be visible".
    await expect(page.locator('text=Learn more').first()).toBeVisible();

    await page.click('text=Get Started');
    // Expect some text to be visible on the page.
    await expect(page.locator('text=Introduction').first()).toBeVisible();
});

Introduction To Test Fixtures

test('basic test', async ({ page }) => {
// Here {page} is fixture

Fixtures are objects that are produced for each test run. Playwright Test is pre-loaded with those fixtures, and you may add your own as well. When executing tests, the Playwright Test examines each test declaration, analyzes the collection of fixtures required by the test, and prepares those fixtures, particularly for the test.

Introduction To Playwright Test Hooks

To build up and break down resources shared amongst tests, use the “test.beforeAll” and “test.afterAll” hooks. You can also use the “test.beforeEach” and “test.afterEach” hooks to build up and break down resources for each test separately.

const { test, expect } = require('@playwright/test');

test.describe('demo feature', () => {
    test.beforeEach(async ({ page }) => {
        // Go to the starting url before each test.
        await page.goto('https://playwright.dev/');
    });

    test('demo test', async ({ page }) => {
        // Assertions use the expect API.
        await expect(page).toHaveURL('https://playwright.dev/');
    });
});

Configure NPM scripts

Playwright Test will detect playwright.config.js by default.

Modify package.json to configure

{
  "name": "playwright_framework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "playwright test"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.16.3"
  }
}

Lets Run

yaseen@342-MC-C02PPBQ5G8WN playwright_framework % npm test
> playwright_framework@1.0.0 test /Users/yaseen/Desktop/Code Tutorials/playwright_framework
> playwright test
Using config at /Users/yaseen/Desktop/Code Tutorials/playwright_framework/playwright.config.js
Running 3 tests using 3 workers
✓  [chromium] › tests/demo.spec.js:9:5 › demo feature › demo test (4s)
  ✓  [firefox] › tests/demo.spec.js:9:5 › demo feature › demo test (5s)
  ✓  [webkit] › tests/demo.spec.js:9:5 › demo feature › demo test (3s)
3 passed (7s)

If you want to put your configuration file somewhere else, use the — — config option.

{
  "name": "playwright_framework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "playwright test --config=tests/example.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.16.3"
  }
}

If you want to run with headed browser using npm, use the following command:

npm run test -- --headed.
#To pass options through npm script, use double dashes: