Debugowanie i skrypty

TIP: Ta lekcja jest częścią rozwijanego Programu Testy Automatyczne z Playwright 🎭

Prezentacja

Debugowanie i skrypty

Dodatkowe materiały

Bazujemy na kodzie lekcji L06_dry_i_before

Kod wynikowy tej lekcji znajduje się tu: L07_debug

Pamiętaj, aby po danej porcji pracy:

  1. 👉 uruchamiać test,
  2. 👉 commitować poprawnie działający kod 😉

Skrypty w package.json

Skrypty w pliku package.json służą do definiowania i wywoływania różnych poleceń oraz operacji związanych z projektem.
Sekcja scripts pozwala na napisanie własnych, niestandardowych komend i operacji, które są specyficzne dla danego projektu. Dzięki temu, zamiast wpisywać długie polecenia w konsoli, można skonfigurować krótkie aliasy, które ułatwiają wykonywanie często używanych czynności.

Przykładowo możemy sobie napisać skrypty:

  • do uruchamiania testów
  • do uruchamiania części lub specyficznych testów
  • do formatowania naszego kodu
  • do uruchamiania aplikacji
  • i wiele innych zależnych od projektu 🙂

W pliku package.json w sekcji scripts dodaj następujące skrypty:

  • Do uruchamiania pojedynczego polecenia:
      "test": "npx playwright test",
    
  • Do uruchamiania pojedynczego polecenia z parametrami:
      "test:headed": "npx playwright test --headed",
    
  • Do uruchamiania innego skryptu z parametrami:
    "test:pulpit:hd" : "npm run test tests/pulpit.spec.ts -- --headed"
    

W rezultacie zawartość pliku package.json przyjmie postać:

{
  "name": "demo-bank-tests",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "npx playwright test",
    "test:pulpit:headed": "npm run test tests/pulpit.spec.ts -- --headed",
    "test:headed": "npx playwright test --headed"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.31.2",
    "prettier": "2.8.4"
  }
}


W powyższym przykładzie są zdefiniowane trzy skrypty:

  • “test”

    Ten skrypt odpowiada za uruchamianie testów za pomocą narzędzia Playwright Test. Po wywołaniu komendy npm run test, zostanie uruchomiona komenda npx playwright test, która uruchomi wszystkie testy zdefiniowane w projekcie.

  • “test:pulpit:headed”

    Ten skrypt odpowiada za uruchomienie testów zawartych w pliku tests/pulpit.spec.ts z trybem headed (czyli z wyświetlaniem przeglądarki). Po wywołaniu w konsoli npm run test:pulpit:headed, zostanie wykonana komenda npm run test tests/pulpit.spec.ts -- --headed.
    Tutaj widzisz bardzo duże uproszczenie komendy, którą musimy wywołać w konsoli w porównaniu do polecenia, które jest uruchamiane “pod spodem” 😉

  • “test:headed”

    Ten skrypt jest odpowiedzialny za uruchomienie wszystkich testów w trybie headed. Po wywołaniu w konsoli npm run test:headed, zostanie wywołana komenda npx playwright test --headed, która uruchomi wszystkie testy z otwartą/widoczną przeglądarką 😉

Sekcja scripts w package.json umożliwia tworzenie skrótów dla różnych poleceń związanych z projektem, co ułatwia zarządzanie i wykonywanie często używanych operacji. W tym przypadku, skrypty są związane z testowaniem przy użyciu narzędzia Playwright Test oraz różnymi konfiguracjami uruchamiania testów z przeglądarką 😉

Skrypty uruchamiamy:

  • Najeżdżając kursorem na nazwę skryptu i wybierając opcję Run
  • Wykonując w konsoli polecenie: npm run nazwa_skryptu
  • Aktywując opcję w ustawieniach EDITOR: NPM Scripts i używając nowej zakładki (na samym dole widoku EDITOR)

Uruchomienie w trybie debug

Każdy skrypt możemy uruchomić także w trybie Debug poprzez najechanie kursorem na nazwę skryptu i skorzystanie z opcji Debug Script.

Aby skrypt podczas debugowania został zatrzymany należy dodać breakpoint klikając po lewej stronie numeru danej linii kodu. Następnie można ponownie uruchomić skrypt w trybie debug.

Debugowanie i skrypty

W zakładce po lewej stronie znajdą się informacje na temat debugowanego skryptu.
U góry pojawi się okno kontroli debugera:

  1. Przycisk play: wykonanie kodu do następnego breakpointa lub do zakończenia skryptu.
  2. Przycisk skoku: przejście do kolejnej instrukcji.
  3. Strzałka w dół: wejście do instrukcji.
  4. Strzałka w górę: wyjście z instrukcji.
  5. Strzałka w okręgu: uruchomienie ponowne skryptu. Nie działa to zazwyczaj z testami Playwright 😀
  6. Przycisk wtyczki: rozłączenie debugera lub zakończenie skryptu.

Nowy test i debugowanie

W pliku pulpit.spec.ts tworzymy nowy test będący na początku kopią ostatniego testu. Zmieniamy jego tytuł.

test('correct balance after successful mobile top-up', async ({ page }) => {
      });

Dodajemy only i ustawiamy breakpoint na linii z :

await page.locator('#widget_1_topup_receiver').selectOption(topUpReceiver);

Rozpoczynamy debugowanie testu.

Sprawdzamy w otwartej przeglądarce lokator do elementu reprezentującego balans:

#money_value'

A następnie dodajemy kod pobrania balansu (poniżej innych stałych):

    const initialBalance = await page.locator('#money_value').innerText();

Uruchamiamy ponownie debug i sprawdzamy wartość zmiennej..

Dodajemy zmienną expectedBalance gdzie obliczamy oczekiwany balans:

    const topUpAmount = '50';
    const initialBalance = await page.locator('#money_value').innerText();
    const expectedBalance = Number(initialBalance) - Number(topUpAmount);

Zwróć uwagę na operację zmiany typu z String na Number aby umożliwić operacje matematyczne.

Stosujemy expectedBalance w asercji:

    // Assert
    await expect(page.locator('#money_value')).toHaveText(`${expectedBalance}`);
  });

Zauważ, że musimy ponownie zmienić typ przekazywanej wartości na String, gdyż taka wartość jest oczekiwana w metodzie weryufikującej.

Usuwamy nieużywane zmienne i uruchamiamy polecenie do formatowania.

Cały nowy test:

  test('correct balance after successful mobile top-up', async ({ page }) => {
    // Arrange
    const topUpReceiver = '500 xxx xxx';
    const topUpAmount = '50';
    const initialBalance = await page.locator('#money_value').innerText();
    const expectedBalance = Number(initialBalance) - Number(topUpAmount);

    // Act
    await page.locator('#widget_1_topup_receiver').selectOption(topUpReceiver);
    await page.locator('#widget_1_topup_amount').fill(topUpAmount);
    await page.locator('#uniform-widget_1_topup_agreement span').click();
    await page.getByRole('button', { name: 'doładuj telefon' }).click();
    await page.getByTestId('close-button').click();

    // Assert
    await expect(page.locator('#money_value')).toHaveText(`${expectedBalance}`);
  });

8 komentarzy

  1. Cześć,
    Element, który sprawdzamy czyli amount, ma atrybut id = money_value
    Czy jedyny sposób na znalezienie to page.locator(‘#money_value’)?
    Nikt nie wadł na metodę getById analogicznej do getByTestId?

    Avatar Jacek Kraś
    1. Hej Jacek!
      Trafne spostrzeżenie. Zdecydowanie jest cała masa sposobów wyszukania elementu.
      Stosujemy je tutaj zamienne aby przyzwyczaić kursanta do różnych konwencji.

      We frameworku produkcyjnym warto uzgodnić i stosować daną hierarchię lokatorów (np.
      getByTestId, inne getBy, css lokator, XPath lokator)

      Pozdrawiam

      Przemek Przemek
  2. Hej

    Nie jest to wielki problem, ale zastanawia mnie dlaczego po uruchomieniu testów pojawia się taki komunikat “Running 5 tests using 2 worker”, na wideo testy uruchamiają się z 1 workerem.

    Playwright config mam taki sam jak Przemek 🙂

    Pozdrawiam

    Avatar Leszek Izdebski
        1. Często tak się zdarza, że nie jesteśmy w stanie wszystkiego wytłumaczyć w jednej lekcji i tematy omówione są w kolejnych.

          Oczywiście śmiało pytaj i postaramy się pomóc 😀

          Pozdro!

          Przemek Przemek
    1. Hej, dzięki za informację!
      Ta paczka może wspomagać debugowanie ale nie trzeba jej instalować.

      Szczególnie, że będzie to globalna paczka (opcja -g) jeśli ją zainstalujemy w sugerowany sposób. Zalecamy uważać na globalne instalacje dla całego systemu (a nie danego projektu) ze względu na trudność w utrzymaniu i kontroli takich paczek.

      Pozdrawiam

      Przemek Przemek

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *