Testování šablon

Dokumentace a články:

Zprovoznění testů

Pro přidání testů do šablony stažené z tpltestu postupujte následovně:

  1. Nainstalovat node a npm: https://nodejs.org/en/download/ (instalátor se zeptá na podporu nativních modulů - není potřeba).

  2. V adresáři se šablonou vytvořte soubor s následujícím obsahem (pokud používáte dodaný ZIP pro PhpStorm, tak je už připravený):

package.json - po vytvoření souboru nabídne PHPStorm instalaci závislostí (kliknout na Run 'npm install').

{
  "scripts": {
    "install": "npx playwright install",
    "start-test-ui": "npx playwright test --ui",
  },
  "devDependencies": {
    "@playwright/test": "^1.40",
    "@simplia/frontend-test-data": "*"
  }
}
../_images/npm-install.png

  1. Ve složce tests založte soubor browsers.json

Soubor obsahuje seznam prohlížečů/zařízení, na kterých budou testy spouštěny. V konkrétních testech lze zařízení omezit.

[
  "Desktop Chrome",
  "Desktop Firefox",
  "Desktop Safari",
  "Pixel 5",
  "iPhone 12"
]

Dostupná zařízení:

Blackberry PlayBook
Blackberry PlayBook landscape
BlackBerry Z30
BlackBerry Z30 landscape
Galaxy Note 3
Galaxy Note 3 landscape
Galaxy Note II
Galaxy Note II landscape
Galaxy S III
Galaxy S III landscape
Galaxy S5
Galaxy S5 landscape
Galaxy S8
Galaxy S8 landscape
Galaxy S9+
Galaxy S9+ landscape
Galaxy Tab S4
Galaxy Tab S4 landscape
iPad (gen 5)
iPad (gen 5) landscape
iPad (gen 6)
iPad (gen 6) landscape
iPad (gen 7)
iPad (gen 7) landscape
iPad Mini
iPad Mini landscape
iPad Pro 11
iPad Pro 11 landscape
iPhone 6
iPhone 6 landscape
iPhone 6 Plus
iPhone 6 Plus landscape
iPhone 7
iPhone 7 landscape
iPhone 7 Plus
iPhone 7 Plus landscape
iPhone 8
iPhone 8 landscape
iPhone 8 Plus
iPhone 8 Plus landscape
iPhone SE
iPhone SE landscape
iPhone X
iPhone X landscape
iPhone XR
iPhone XR landscape
iPhone 11
iPhone 11 landscape
iPhone 11 Pro
iPhone 11 Pro landscape
iPhone 11 Pro Max
iPhone 11 Pro Max landscape
iPhone 12
iPhone 12 landscape
iPhone 12 Pro
iPhone 12 Pro landscape
iPhone 12 Pro Max
iPhone 12 Pro Max landscape
iPhone 12 Mini
iPhone 12 Mini landscape
iPhone 13
iPhone 13 landscape
iPhone 13 Pro
iPhone 13 Pro landscape
iPhone 13 Pro Max
iPhone 13 Pro Max landscape
iPhone 13 Mini
iPhone 13 Mini landscape
iPhone 14
iPhone 14 landscape
iPhone 14 Plus
iPhone 14 Plus landscape
iPhone 14 Pro
iPhone 14 Pro landscape
iPhone 14 Pro Max
iPhone 14 Pro Max landscape
Kindle Fire HDX
Kindle Fire HDX landscape
LG Optimus L70
LG Optimus L70 landscape
Microsoft Lumia 550
Microsoft Lumia 550 landscape
Microsoft Lumia 950
Microsoft Lumia 950 landscape
Nexus 10
Nexus 10 landscape
Nexus 4
Nexus 4 landscape
Nexus 5
Nexus 5 landscape
Nexus 5X
Nexus 5X landscape
Nexus 6
Nexus 6 landscape
Nexus 6P
Nexus 6P landscape
Nexus 7
Nexus 7 landscape
Nokia Lumia 520
Nokia Lumia 520 landscape
Nokia N9
Nokia N9 landscape
Pixel 2
Pixel 2 landscape
Pixel 2 XL
Pixel 2 XL landscape
Pixel 3
Pixel 3 landscape
Pixel 4
Pixel 4 landscape
Pixel 4a (5G)
Pixel 4a (5G) landscape
Pixel 5
Pixel 5 landscape
Moto G4
Moto G4 landscape
Desktop Chrome HiDPI
Desktop Edge HiDPI
Desktop Firefox HiDPI
Desktop Safari
Desktop Chrome
Desktop Edge
Desktop Firefox

  1. Ve složce tests vytvořte testy (můžete vytvářet i podsložky) - soubor musí vždy končit .spec.js nebo .spec.ts:

test.spec.js

import {test, expect} from '@playwright/test';
import {Url} from '@simplia/frontend-test-data';

test('buy single variant on mobile', async ({page, isMobile}) => {
    const url = await Url.productWithSingleSelectedVariant();

    await page.goto(url);
    await page.waitForLoadState();

    if (await page.locator('.gdpr-cookie-bar').isVisible()) {
        await page.locator('.gdpr-cookie-bar .gdpr-cookie-confirm').click();
    }

    await page.locator('.js_koupit').getByRole('button').click();

    await expect(page.locator('.dialog-koupit .ui-dialog-title')).toBeVisible();
    await expect(page.locator('#dialog-tlacitka .button-shadow--green')).toBeVisible();
});

  1. Spustit testy lokálně:

Pro otevření testovacího rozhraní v terminálu spusťte příkaz:

npx playwright test --ui

Testovací URL

Do testů není možné uvádět konkrétní URL:

  • nefungovaly by na jiných tpltestech

  • vyprodáním produktu by test přestal fungovat

V testech je proto připravená třída Url, která vrací typové stránky:

  • Url.index() - hlavní strana

  • Url.index({preselectGDPR: true}) - hlavní strana, ale všechny povinné GDPR checkboxy nebo souhlasy s podmínkami jsou předzatrnuté

  • Url.productWithoutVariants() - náhodný produkt bez varianty

  • Url.productWithSingleVariant() - náhodný produkt s jednou variantou

  • Url.productWithSingleSelectedVariant() - náhodný produkt s jednou předvybranou variantou

  • Url.productWithVariants() - náhodný produkt s více variantami

  • Url.productWithVariantsSelected() - náhodný produkt s více variantami a jednou předvybranou

Všechny URL je navíc možné doplnit o parametry, které ovlivní chování načtené stránky. Lze tak například vypnout javascript a testovat stránku jak vidí zákazník na pomalém připojení: Url.index({javascript: false})

Kromě připravených URL je pak také možné v testu načíst stránku a prokliknout se například v menu. Pokud je potřeba typová stránka se specifickými parametry, obraťte se na podporu pro doplnění.

Vstupní data

Pro vstupní data formulářů lze použt pomocnou třídu Input. Narozdíl od statických dat přímo v testech (například doručovací adresa) bude zajištěno, že vstupní data jsou relevantní pro konkrétní doménu.

import {Input} from '@simplia/frontend-test-data';

export default async function (page) {
    const testAddress = await Input.validAddress();

    await page.locator('.form_adresa input[name="email"]').fill(testAddress.email)
}

Doporučení

Playwright předpokládá navigaci přes texty tlačítek a konrolu zobrazených textů. V případě e-shopu toto ale bohužel nelze používat, protože produkty se mění a šablony jsou použité na e-shopech v různých jazycích.

Je proto nutné používat buď CSS selektory nebo ideálně „data-testid“ atribut. Pokud se element označí v kód atributem data-testid="directions", tak lze v Playwright použít volání page.getByTestId('directions').click()

Používání testid má výhodu, že pro standardní prvky (například vložení do košíku) lze používat stejné označení napříč šablony bez vlivu na CSS/JS. Definice testu tak může přežít i redesign.

Speciální hodnoty

E-mail debug@simplia.cz v objednávce, registraci nebo přihlášení k newsletteru skončí na potvrzovací stránce, jako kdyby akce proběhla, ale jde provádět opakovaně a bez zakládání objednávky.

Hledaná fráze %debugSearchAnyResult% vždy vrátí nějaký výsledek a fráze *%debugSearchNoResult% naopak nikdy produkt nenajde.