Czym jest Mockowanie danych?

Language

date

Oct 11, 2023

slug

mockowanie-w-playwright

author

status

Public

tags

Playwright

Porady

Automatyzacja

REST API

summary

Mockowanie, jego wady i zalety na prostym i praktycznym przykładzie

type

Post

thumbnail

updatedAt

May 16, 2024 06:14 AM

category

👨‍🏫 Porady

Czym jest mockowanie?

• przygotowanie prawdziwych danych jest kosztowne

• nie mamy dostępu do prawdziwych danych

Przykład

Kontekst - testowana strona

• mamy do przetestowania stronę z artykułami i komentarzami

• wyświetlane dane pochodzą z back-endu

• na front-endzie jest dużo logiki, formatowania i walidacji

• prezentacja artykułów i komentarzy jest bardzo ważna z punktu widzenia biznesowego - klientowi bardzo zależy, aby ta funkcjonalność działała poprawnie

Co możemy przetestować?

• czy artykuł wyświetla się poprawnie*

• czy komentarze wyświetlają się poprawnie*

• czy brak komentarzy jest poprawnie* prezentowany

• czy artykuł/komentarz z różnymi wartościami poszczególnych pól wyświetla się poprawnie* (czyli np. testy wartości brzegowych - pusty tytuł, tytuł z jednym znakiem, tytuł z maksymalną liczbą znaków etc.)

• itp.

Projektujemy pierwsze testy

• posiadać użytkownika

• użytkownik musi stworzyć poprawny artykuł

• użytkownik musi stworzyć poprawny komentarz

Potrzeba

• czy brak komentarzy jest poprawnie* prezentowany

• czy artykuł/komentarz z różnymi wartościami poszczególnych pól wyświetla się poprawnie* (czyli np. testy wartości brzegowych - pusty tytuł, tytuł z jednym znakiem, tytuł z maksymalną liczbą znaków etc.)

• itp.

Skąd pochodzą dane wyświetlane na UI?

Pomysł

Mockowanie w testach automatycznych

test("should display article title", async ({ page }) => {
  // Act:
  await page.goto('http://localhost:3000/article.html?id=59');
	
  // Assert:
  await expect(page.getByTestId('article-title')).toBeInViewport();
});

test("should display article title", async ({ page }) => {
  // Arrange:
  await page.route("*/**/api/articles/*", async (route) => {
    const response = await route.fetch();
    const json = await response.json();
    json["title"] = "";
    await route.fulfill({ response, json });
  });

  // Act:
  await page.goto("http://localhost:3000/article.html?id=1");

  // Assert:
  await expect(page.getByTestId("article-title")).toBeInViewport();
});

await page.route('*/**/api/articles/*', async route => {
    const response = await route.fetch();
    const json = await response.json();
    json['title'] = '';
    await route.fulfill({ response, json });
});

await page.route('*/**/api/articles/*', async route => {

const response = await route.fetch();
const json = await response.json();

json['title'] = '';

await route.fulfill({ response, json });

Wynik zastosowania kodu z mockowaniem

Podsumowanie

Dodatkowe materiały

• Webinar: Playwright w akcji – testy GUI bez backendu (ale z mockowaniem danych) - wszystkie informacje i linki znajdziesz na naszej stronie: 🔗https://jaktestowac.pl/mockowanie/

• Oficjalna dokumentacja 🔗https://playwright.dev/docs/mock

• Nowatorski Program o automatyzacji testów z Playwright: 🔗https://jaktestowac.pl/playwright

Bonus: o co chodzi z niewykonalnymi przypadkami testowymi

Powodzenia w mockowaniu!