Playwright vs Cucumber #1

Mi ez?

Ez valószínűleg egy több bejegyzésből álló sorozat lesz, mivel az időm eléggé limitált, így ha eljutok ide, hogy kisérletezzek vele, és megírjam, az mostanában igen nagy szó. Ráadásul ez most még csak egy eléggé high level írás, ami később boncolgatásra fog kerülni, hogy mik ezek, mire valók, hová tudjuk fejleszteni a tesztjeinket. Természetesen lesz egy fejlődő repository is hozzá, ahol mindig az épp legfrissebb újításokat tartalmazó project és kód lesz elérhető.

A Playwright egy teszt automatizáló keretrendszer, amire rá lehet ültetni a Cucumbert és BDD alapon írni teszteket, ami egyik nagy előnye, hogy könnyedén olvsaható, hogy mi fog végrehajtodni egy tesztfutás során. Illetve könnyedén lehet építkezni a meglevő építőelemekből az új tesztek készítése során.

Előfeltételek

• legyen telepített NodeJS, lehetőség szerint az éppen aktuális,

• illetve egy számunkra ismert és kényelmes fejlesztői eszköz, nekem a Visual Studio Code az.

Hozzunk kétre egy könyvtárat, amiben dolgozni szeretnénk, majd pedig innen nyissuk meg a VS Code-t, vagy forditott esetben a VS Code-ból a könyvtárat.

Telepítés

VS Code-ban nyissuk meg a terminált (File ->Open Folder -> Visual Studio Code -> Open the Terminal) és adjuk ki a következő parncsot:

npm init playwright@latest

A telepítés során felmerülő kérdésekre értelemszerűen válaszoljunk. Én személy szerint a TypeScript nyelvet preferálom, így azzal mentem tovább.

Telepítsük fel a Cucumbert:

npm i @cucumber/cucumber

Sikeres teleítést követően hozzunk létre egy cucumber.json fájt a gyökér mappában, és másoljuk bele a követkeőt:

{

    "default": {

        "paths": [

            "tests/features/"

        ],

        "requireModule": [
            "ts-node/register"
        ],
        "require": [

            "tests/steps/*.ts"

        ],

        "formatOptions": {

            "snippetInterface": "async-await"

        },

        "format": [

            [

                "html",

                "cucumber-report.html"

            ],

            "summary",

            "progress-bar",

            "json:./cucumber-report.json"

        ]

    }

}

Mentést követően el is kezdhetjük írni az első tesztünket.

Tesztírás

Ahogy a fentebb található cucumber.json fájlban látható, a tesztek a tests/features/ alatt fognak elhelyezkedni.

Nézzünk rá egy példát:

Feature: Homepage Functionality

    Scenario: Verify Product Web Testing

        Given User navigates to 'https://www.saucedemo.com/'

        When Registered user login

        Then Login is done

A lépések leírása pedig tests/steps/*.ts.

import { Given, When, Then, Before, After, setDefaultTimeout } from "@cucumber/cucumber";
import { chromium, Page, Browser } from "@playwright/test";

setDefaultTimeout(60 * 1000);

let page: Page;
let browser: Browser;

Before(async function () {

    browser = await chromium.launch({ headless: false });

    const context = await browser.newContext();

    page = await context.newPage();

});

Given("User navigates to {string}", async (myUrl) => {

    await page.goto(myUrl);

});

When('Registered user login', async function () {

    const userName = page.locator('#user-name');
    const userPassword = page.locator('#password');
    const loginButton = page.locator('#login-button');

    await userName.waitFor();
    await userName.click();
    await userName.fill('standard_user');

    await userPassword.waitFor();
    await userPassword.click();
    await userPassword.fill('secret_sauce');

    await loginButton.waitFor();
    await loginButton.click();

});

Then('Login is done', async function () {

    await page.locator('.header_secondary_container').waitFor();
    console.log('hello world');

});

After(async function () {
    await browser.close();
});

Futtatás

A következő parancs segítésével lehet futtatni a tesztet:

npx cucumber-js test

Tehát, amint látható, elindulni viszonlag könnyű. Folytatásokban majd részletesebben belemegyünk a különféle beállításokba, és hogy hová tudjuk ezt fejleszteni, hogy tényleg egy jól használható megoldás legyen.

A fentebb leírt lépéseket nem magam találtam ki, én is elég sok leírást böngésztem végig, mire egy számomra megfelelőt találtam, és elkezdtem felépíteni a saját megoldásomat.