Zestaw testów i przypadki negatywne

Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright

Zestaw testów i przypadki negatywne

Prezentacja

Dodatkowe materiały

• https://demo-bank.vercel.app/

Plik README.md z najważniejszymi poleceniami

Aby ułatwić sobie pracę dodamy do naszego projektu plik README.md. Jest to standardowy plik z dokumentacją, który wypełniamy posługując się specjalną składnią zwaną markdown.

Plik ten dodajemy w głównym katalogu naszego projektu tzn. klikając prawym klawiszem myszki w pustej przestrzeni pod listą plików w naszym projekcie.

Użyj opcji New File… i stwórz plik z nazwą README.md.

W nim też można zawrzeć wszystkie istotne informacje. My proponujemy takie:

# Test Automation training form jaktestowac.pl


## Links
- course https://jaktestowac.pl/course/playwright-wprowadzenie/
- test site
https://demo-bank.vercel.app/  
If link broken check first lesson for update:
https://jaktestowac.pl/lesson/pw1s01l01/


## Commands
- check `NodeJS` version    
`node -v`
- new project with Playwright:  
`npm init playwright@latest`
- record tests for given site  
`npx playwright codegen https://demo-bank.vercel.app/`
- run tests without browser GUI:  
`npx playwright test`
- run test with browser GUI:  
`npx playwright test --headed`
- viewing report  
`npx playwright show-report`


## Playwright Config modifications
- config file `playwright.config.ts`
- disabling browsers, i.e. Firefox:
    ```json
    // {
    //   name: 'firefox',
    //   use: {
    //     ...devices['Desktop Firefox'],
    //   },
    // },
    ```

Zapisuj tu istotne dla Ciebie informacje, dzięki temu szybko wykonasz polecenia bez wychodzenia z projektu 😉

Podstawowa składnia pliku README.md

• Nagłówki – użyj # i odstęp. Wraz z ilością znaków # zmienia się wielkość nagłówka.
• Listy – użyj - i odstęp.
  TIP: Łamanie linii w listach uzyskasz za pomocą podwójnej spacji oraz Enter na końcu wiersza listy.
• Kod i wyróżnienia – użyj ` czyli znak backtick na początku i końcu kodu.
• Wielolinijkowy kod – użyj ``` czyli znak backtick x 3 na początku i końcu kodu, który zawiera wiele linii.

Co na początku warto wiedzieć o VS Code?

• Preview – podgląd pliku README.md (znajdziesz w prawym górnym rogu),
• Autosave – auto zapisywanie plików, które można ustawić w menu: File | Auto Save,
• Timeline – czyli historia danego pliku. Można ją podejrzeć klikając prawym klawiszem myszy na pliku (po lewej stronie w explorer) a następnie wybraniu opcji Timeline z menu kontekstowego.

Refaktoryzacja nazw

Zmieniamy nazwy testów i związanych z nimi plików, tak aby były bardziej czytelne.

Zmieniamy nazwę pliku z example.spec.ts na login.spec.ts.

Zmieniamy nazwę testu z:

  test('test', async ({ page }) => {


  });

na

  test('login with correct credentials', async ({ page }) => {


  });

Test na niepoprawne logowanie ze zbyt krótkim ID użytkownika

Kroki:

1. Przygotowanie pustego testu w pliku login.spec.ts o takiej samej nazwie co wcześniej istniejący test:

     test('login with correct credentials', async ({ page }) => {
   
   
     });
   
   

2. Sprawdzamy wynik po uruchomieniu wszystkich testów:

   npx playwright test
   

   Na konsoli powinniśmy otrzymać błąd:

   Running 2 tests using 2 workers
   ========================================
    duplicate test titles are not allowed.
    - title: successful login with correct credentials
      - login.spec.ts:3
      - login.spec.ts:15
   ========================================
   
   
     2 skipped
   

   Oznacza to, że nie możemy posiadać testów o takiej samej nazwie.

3. Zmiana nazwy pustego testu w pliku login.spec.ts:

     test('login with incorrect credentials with incorrect username', async ({ page }) => {
   
   
     });
   
   

4. Manualnie wykonujemy test na niepoprawne logowanie, gdy podamy zbyt krótki ID użytkownika. Zwróć uwagę na komunikaty o błędach pod polem ID.
5. Kopiujemy kod część kodu z poprzedniego testu:

       await page.goto('https://demo-bank.vercel.app/');
       await page.getByTestId('login-input').click();
       await page.getByTestId('login-input').fill('tester');
       await page.getByTestId('password-input').click();
   

   TIP:Aby poprawnie sformatować edytowany kod, użyj opcji autoformatowania.
   Wywołaj ją w oknie edycji kodu prawym klawiszem myszki. Wybierz opcję Format Document.
6. Nagrywamy test za pomocą polecenia:

   npx playwright codegen https://demo-bank.vercel.app/
   

   a następnie kopiujemy element z tekstem błędu do testu w pliku login.spec.ts

   await page.getByTestId('error-login-id').click();
   

7. Kopiujemy kod część kodu z poprzedniego testu:

       await page.goto('https://demo-bank.vercel.app/');
       await page.getByTestId('login-input').click();
       await page.getByTestId('login-input').fill('tester');
       await page.getByTestId('password-input').click();
   

8. Dodajemy asercję i wykorzystujemy element z tekstem błędu:

       await expect(page.getByTestId('error-login-id')).toHaveText('');
   
   
   

   Uruchamiamy testy i kończy się on niepowodzeniem, ale możemy łatwo skopiować tekst błędu, którego oczekujemy.

   TIP:Tworzymy testy dla istniejącej strony i obecnie nie porównujemy jej z dokumentacją (gdyż taką tutaj nie dysponujemy).

   Pamiętaj, aby tworzyć asercje w projekcie w oparciu o dostępną dokumentację i wymagania.

9. Sprawdzamy wynik po uruchomieniu wszystkich testów:

   npx playwright test
   

   Na konsoli powinniśmy otrzymać następujący wynik:

   Running 2 tests using 2 workers
   
     2 passed (9s)
   

   Oznacza to, że nasze testy zakończyły się sukcesem.

Describe w testach

• test.describe grupuje nasze testy w logiczną całość,
• przykład wykorzystania test.describe:

  import { test, expect } from '@playwright/test';
  
  
  test.describe('User login to Demobank', () => {
   
    test('successful login with correct credentials', async ({ page }) => {
      // kod testu
    });
  
  
    test('unsuccessful login with too short username', async ({ page }) => {
      // kod testu
    });
  
  
  });
  
  

Piszemy test na niepoprawne logowanie ze zbyt krótkim hasłem użytkownika

Kroki:

1. Możemy użyć wcześniejszy test – kopiujemy go w pliku login.spec.ts i zmieniamy mu nazwę na:

     test('unsuccessful login with too short password', async ({ page }) => {
       await page.goto('https://demo-bank.vercel.app/');
       await page.getByTestId('login-input').click();
       await page.getByTestId('login-input').fill('testerLO');
       await page.getByTestId('password-input').click();
       await page.getByTestId('password-input').fill('1234');
   
   
       await expect(page.getByTestId('error-login-id')).toHaveText('identyfikator ma min. 8 znaków');
     });
   
   

2. Następnie nagrywamy test tak aby wywołać informacje o błędzie
   Tutaj kliknięcie w przycisk Zapisz nie zadziała.
   Należy kliknąć w dowolne inne miejsce np:

       await page.locator('#login_password_container label').click(); 
   

   Nagraj również kliknięcie w tekst błędu aby poznać kod lokatora.

3. Uzupełniamy test w VSC. Zwróć uwagę na asercję z poprawnymi danymi:

     test.only('unsuccessful login with to short password', async ({ page }) => {
       await page.goto('https://demo-bank.vercel.app/');
       await page.getByTestId('login-input').click();
       await page.getByTestId('login-input').fill('testerLO');
       await page.getByTestId('password-input').click();
       await page.getByTestId('password-input').fill('1234');
       await page.locator('#login_password_container label').click(); 
   
   
       await expect(page.getByTestId('error-login-password')).toHaveText('hasło ma min. 8 znaków');
     });
   
   

4. Zamiast kliknięcia w losowy element, zastosujemy funkcję blur() na polu password. Ta funkcja służy do opuszczenia pola, na którym w danej chwili jesteśmy:

   await page.getByTestId('password-input').blur();
   

   W ten sposób wywołujemy informacje o błędzie.

5. Sprawdzamy wynik po uruchomieniu wszystkich testów:

   npx playwright test
   

   Na konsoli powinniśmy otrzymać następujący wynik:

   Running 3 tests using 3 workers
   
     3 passed (8s)
   

Uruchamianie pojedynczego testu

Możesz zaraz po obiekcie test dodać opcję only:

  test.only('unsuccessful login with to short password', async ({ page }) => {

Uruchamiając testy w konsoli, zostanie uruchomiony wyłącznie ten test.

Cały kod

Zawartość pliku example.spec.ts:

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


test.describe('User login to Demobank', () => {
 
  test('successful login with correct credentials', async ({ page }) => {
    await page.goto('https://demo-bank.vercel.app/');
    await page.getByTestId('login-input').click();
    await page.getByTestId('login-input').fill('testerLO');
    await page.getByTestId('password-input').click();
    await page.getByTestId('password-input').fill('10987654');
    await page.getByTestId('login-button').click();
    await page.getByTestId('user-name').click();


    await expect(page.getByTestId('user-name')).toHaveText('Jan Demobankowy');
  });


  test('unsuccessful login with too short username', async ({ page }) => {
    await page.goto('https://demo-bank.vercel.app/');
    await page.getByTestId('login-input').click();
    await page.getByTestId('login-input').fill('tester');
    await page.getByTestId('password-input').click();
    await page.getByTestId('error-login-id').click();


    await expect(page.getByTestId('error-login-id')).toHaveText('identyfikator ma min. 8 znaków');
  });


  test('unsuccessful login with too short password', async ({ page }) => {
    await page.goto('https://demo-bank.vercel.app/');
    await page.getByTestId('login-input').click();
    await page.getByTestId('login-input').fill('testerLO');
    await page.getByTestId('password-input').click();
    await page.getByTestId('password-input').fill('1234');
    await page.getByTestId('password-input').blur();


    await expect(page.getByTestId('error-login-password')).toHaveText('hasło ma min. 8 znaków');
  });


});