BMayhew / playwright-demo

A Repo to show off some playwright scripts

Home Page:https://bmayhew.github.io/playwright-demo/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Playwright Typescript Demo

I plan to create a playwright-demo repository showing off different features of playwright.

For many of the tests I will be using - https://www.automationexercise.com/

Getting Started

The framework we are using is Playwright. If you want a good video to introduce you to Playwright, check out this video. You can try out playwright in the cloud here.

For helpful tips checkout https://playwrightsolutions.com

Installation

If you want to run this on your local machine, git clone the repo to local. In the main directory run the below commands. This will install playwright dependencies on your machine.

npm install
npx playwright install

If you want to start from scratch

You can easily start a project from scratch by running the below command from an empty directory. This will even create the GitHub Actions file for running these tests in the cloud.

npm init playwright@latest

From a new directory run npm init playwright

Running the automated checks

npx playwright test

Running the Code Generator

npx playwright codegen

Running the Tests in VS Code

The Playwright team has released a VS Code Extension that allows you to debug tests easily with the click or right click of a button.

Writing Assertions

*Playwright API Assertions - docs to the API assertions using Jest

Json Schema Checks

I use genson-js to generate JSONSchema for schema snapshot testing. https://github.com/aspecto-io/genson-js. For most of our API calls we will do a JSON schema check. This can be done with the below lines of code.

    //This section does Json Schema Assertions
    let jsonName = "{VERB}_{endpoint_name}";
    let path = "{path}";

    //Comment this command once you have created the schema and saved
    //createJsonSchema(jsonName, path, body);
    let existingSchema = require("../../.api/" +
      path +
      "/" +
      jsonName +
      "_schema.json");
    let responseSchema = getSchemaFromJson(body);
    expect(responseSchema).toEqual(existingSchema);
    schemaEqual(existingSchema, body);

Working with Snapshots (images)

Update current snapshots

npx playwright test --update-snapshots

Updating Snapshots for CI runs

You will run into scenarios where you will need to add a update a snapshot image. The best way to do this is running the test within a local docker container with the flag --update-snapshots.

If running on a M1 mac, this playwright docker image will work

docker run --ipc=host --shm-size=1gb --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.32.3-arm64 npx playwright test tests/ui/loginUser.spec.ts 

While at the bash prompt in the docker container you can run this command which will install playwright and all the dependencies and run all the tests and update the snapshots

npm ci && npx playwright install --with-deps && npx playwright test --update-snapshots

Packages

Note these packages are automatically installed when running the install commands above

  • @playwright/test | Playwright Docs - allows us to use the playwright test runner along with playwright
  • dotenv - allows us to use the .env file at the root of the directory to use environment variables
  • genson-js - used in JSON schema generation and comparison

Additional Learnings

Playwright Resources

About

A Repo to show off some playwright scripts

https://bmayhew.github.io/playwright-demo/


Languages

Language:TypeScript 98.0%Language:Shell 1.1%Language:PowerShell 0.9%