Playwright Playground

Description

This project is a playground for using Microsoft Playwright in TypeScript.

Prerequisites

You need the following prerequisites installed on your device to be able to run and contribute to this project:

Git -> Download Git or Download GitHub Desktop
Visual Studio Code -> Download VSCode
NodeJS -> Download NodeJS
Playwright -> Installing Playwright for VS Code
allure-playwright -> Installing allure-playwright reporter

*Note: Always make sure to download the latest stable version compatible with your OS and CPU architecture.

Using This project

Clone the project using GitHub Dekstop.
Ensure that you've installed the official Playwright VS Code plugin, and ran npm install in the project root directory.
Open the project folder in VS Code by clicking File > Open Folder....
Jump to the Test Execution and Reporting section to execute your code.

Getting Started with a new Playwright project from scratch

Create new test specs under the tests/ directory following the lowerCamelCase.spec.ts naming convention. Sub directories can be created for each testing scope.
Make sure to add a test description and use allure annotations allure.feature() and allure.description().
After you create a new linear test, you need to split it using test.step() into clear steps, and use Given/When/Then/And to describe your steps.
Follow the Playwright user guide to ensure that you're applying the Page Object Model design pattern properly.
Page files should be created under the pages/ directory following the lowerCamelCase.ts naming convention. Sub directories can be created for each application module.
This is what a sampleTest.spec.ts should look like:

import { test, expect } from '@playwright/test';
import { allure } from "allure-playwright";
import { GoogleHomePage } from "../pages/google/home";

test('Story #1 - Validate Page Components', async ({ page }) => {
    allure.feature('Google POC Feature');
    allure.description('When I navigate to Google homepage, Then the Page Title should be "Google", And the Google Logo should be displayed.');

    const googleHomePage = new GoogleHomePage(page);
    await test.step('When I navigate to Google homepage', async () => {
        await googleHomePage.goto();
    });

    await test.step('Then the Page Title should be "Google"', async () => {
        await googleHomePage.expectPageTitleToBeCorrect();
    });

    await test.step('And the Google logo should be displayed', async () => {
        await googleHomePage.expectGoogleLogoToBeDisplayed();
    });
});

This is what a samplePage.ts should look like:

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

export class GoogleHomePage {
  readonly page: Page;
  readonly url = 'https://www.google.com/ncr';
  readonly googleLogoImage: Locator;
  readonly searchBar : Locator;

  constructor(page: Page) {
    this.page = page;
    this.googleLogoImage = page.locator('img[alt="Google"]');
    this.searchBar = page.locator('input[name="q"]');
  }

  async goto() {
    await this.page.goto(this.url);
  }

  async expectGoogleLogoToBeDisplayed() {
    await expect(this.googleLogoImage).toHaveScreenshot();
  }

  async expectPageTitleToBeCorrect(){
    await expect(this.page).toHaveTitle('Google');
  }

  async searchFor(query : string){
    await this.searchBar.type(query);
    await this.searchBar.press('Enter');
  }
}

Managing Test Data

Create new test data JSON file under the testData/ directory following the googleSmoke.json naming convention. Sub directories can be created for each testing scope.
This is what a googleSmoke.json should look like:

{
  "google": {
    "search": {
      "query": "Microsoft Playwright"
    }
  }
}

Add this import to your test spec file

import testData from '../testData/google.json';

Call the test data directly using autocomplete by following this example

await test.step('And search for "Microsoft Playwright"', async () => {
  await googleHomePage.searchFor(testData.google.search.query);
});

Test Execution and Reporting

Follow this guide for Running Tests.
After Test Execution is completed, you will find all the execution reports under this directory reports/.
You can generate and serve a temporary allure report by openning a new Terminal session in the project root directory [Terminal > New Terminal] and running this command allure serve reports/allure-results.
You can generate and open a saved allure report by openning a new Terminal session in the project root directory [Terminal > New Terminal] and running this command to generate the report allure generate reports/allure-results -o allure-report --clean and then this command to open the report allure open allure-report.
You can open the monocart-report -which provides a lightweight tree view for all your tests in a single file- by opening this file in your preferred browser reports/monocart-report/report.html.
You can open the native playwright-report by opening this file in your preferred browser reports/playwright-report/index.html.
You can download the trace.zip file from any of the reports, or explore them manually under the reports/test-artifacts/ directory. To open a playwright trace report you should use your preferred browser to navigating to Playwright Trace Viewer, and then drag/drop the trace archive file to open it.

MohabMohie/Playwright_playground