"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "wprowadzenie-do-testowania-end-to-end-z-użyciem-jest-puppeteer", "hProperties": { "id": "wprowadzenie-do-testowania-end-to-end-z-użyciem-jest-puppeteer" } }, "depth": 2, "value": "Wprowadzenie do testowania end-to-end z użyciem jest-puppeteer" }, { "data": { "id": "konfigurowanie-środowiska-testowego", "hProperties": { "id": "konfigurowanie-środowiska-testowego" } }, "depth": 2, "value": "Konfigurowanie środowiska testowego" }, { "data": { "id": "najczęściej-używane-api", "hProperties": { "id": "najczęściej-używane-api" } }, "depth": 2, "value": "Najczęściej używane API" }, { "data": { "id": "prosta-aplikacja-to-do", "hProperties": { "id": "prosta-aplikacja-to-do" } }, "depth": 2, "value": "Prosta aplikacja to-do" }, { "data": { "id": "spodziewaj-się-że-aplikacja-i-jej-dane-zostały-załadowane", "hProperties": { "id": "spodziewaj-się-że-aplikacja-i-jej-dane-zostały-załadowane" } }, "depth": 2, "value": "Spodziewaj się, że aplikacja i jej dane zostały załadowane" }, { "data": { "id": "spodziewaj-się-kliknięcia-określonego-przycisku", "hProperties": { "id": "spodziewaj-się-kliknięcia-określonego-przycisku" } }, "depth": 2, "value": "Spodziewaj się kliknięcia określonego przycisku" }, { "data": { "id": "spodziewaj-się-że-zewnętrzny-link-zostanie-otwarty-w-nowej-karcie", "hProperties": { "id": "spodziewaj-się-że-zewnętrzny-link-zostanie-otwarty-w-nowej-karcie" } }, "depth": 2, "value": "Spodziewaj się, że zewnętrzny link zostanie otwarty w nowej karcie" }, { "data": { "id": "spodziewaj-się-że-element-zostanie-utworzony-z-formularza", "hProperties": { "id": "spodziewaj-się-że-element-zostanie-utworzony-z-formularza" } }, "depth": 2, "value": "Spodziewaj się, że element zostanie utworzony z formularza" }, { "data": { "id": "podsumowanie", "hProperties": { "id": "podsumowanie" } }, "depth": 2, "value": "Podsumowanie" }]; const readingTime = { "minutes": 7, "words": 1963, "text": "7 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "W ramach naszego zobowiązania do zapewnienia jakości Logto i ciągłego doskonalenia stosujemy jest-puppeteer do testów automatycznych end-to-end. Pozwala nam to na szybką iterację procesu rozwoju Logto bez zakłóceń." }), "\n", _jsx(_components.p, { children: "W tym artykule podzielimy się naszym doświadczeniem w pisaniu efektywnych skryptów testowych jest-puppeteer na przykładzie prostego zadania do zrobienia. Naszym celem jest pomóc ci szybko rozpocząć pisanie kodu testowego jest-puppeteer do twoich własnych projektów." }), "\n", _jsxs(_components.h2, { id: "wprowadzenie-do-testowania-end-to-end-z-użyciem-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#wprowadzenie-do-testowania-end-to-end-z-użyciem-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Wprowadzenie do testowania end-to-end z użyciem jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["Testowanie end-to-end to sposób na zapewnienie, że twoja aplikacja działa poprawnie z perspektywy użytkownika. Aby to osiągnąć, korzystamy z dwóch podstawowych narzędzi: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " i ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " to popularny framework do testowania JavaScriptu, który oferuje przyjazne dla użytkownika API do pisania testów i asercji. Jest powszechnie używany do testowania jednostkowego i integracyjnego."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " to biblioteka Node.js opracowana przez zespół Chrome, która oferuje wysokopoziomowe API do kontrolowania przeglądarek Chrome lub Chromium bez interfejsu graficznego. Jest to idealne narzędzie do automatyzacji interakcji z przeglądarką w testach end-to-end."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " to preset do Jest, który umożliwia testowanie end-to-end z użyciem Puppeteer. Oferuje proste API do uruchamiania nowych instancji przeglądarek oraz interakcji z nimi na stronach internetowych."] }), "\n", _jsx(_components.p, { children: "Teraz, gdy masz podstawowe zrozumienie niezbędnych narzędzi, zanurzmy się w konfigurowanie środowiska testowego." }), "\n", _jsxs(_components.h2, { id: "konfigurowanie-środowiska-testowego", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#konfigurowanie-środowiska-testowego", children: _jsx(_components.span, { children: "#" }) }), "Konfigurowanie środowiska testowego"] }), "\n", _jsx(_components.p, { children: "Konfigurowanie środowiska testowego do testów end-to-end z użyciem jest-puppeteer to prosty proces, obejmujący trzy główne kroki:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Zainstaluj zależności" }), "\n"] }), "\n", _jsx(_components.p, { children: "W swoim projekcie (lub tworząc nowy projekt) otwórz terminal i uruchom:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm install --save-dev jest jest-puppeteer puppeteer\n" }) }), "\n", _jsxs(_components.p, { children: ["Następnie przejdź do ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " i zainstaluj Chromium (które jest potrzebne do Puppeteer):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "cd node_modules/puppeteer\nnpm run postinstall\n" }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Skonfiguruj Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Następnie musisz skonfigurować Jest do płynnej pracy z Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Utwórz plik konfiguracyjny Jest (np. ", _jsx(_components.code, { children: "jest.config.js" }), ") w katalogu głównym projektu, jeśli go jeszcze nie masz. W tym pliku konfiguracyjnym, określ jest-puppeteer jako preset:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Inne konfiguracje Jest...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Możesz dostosować inne ustawienia Jest w tym pliku, jeśli to konieczne. Więcej informacji na temat dostosowywania konfiguracji Jest znajdziesz w ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "dokumentacji konfiguracji Jest" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Napisz swoje testy" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Twórz pliki testowe w swoim projekcie, zazwyczaj nazywane z rozszerzeniem ", _jsx(_components.code, { children: ".test.js" }), ". Jest automatycznie wykryje i uruchomi te pliki testowe."] }), "\n", _jsxs(_components.p, { children: ["Oto przykład z ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "dokumentacji Jest" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "opisz('Google', () => {\n beforeAll(async () => {\n await page.goto('https://google.com');\n });\n\n to('powinno mieć tytuł \"Google\"', async () => {\n oczekiwane\n await (page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Następnie uruchom polecenie, aby wykonać test:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Stosując te trzy kroki, będziesz mieć dobrze skonfigurowane środowisko testowe do wykonywania testów end-to-end z użyciem jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Jednak pamiętaj, że to tylko podstawowy przykład. Po więcej szczegółowych informacji na temat konfiguracji środowiska odsyłam do odpowiedniej dokumentacji:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Rozpoczęcie pracy" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Używanie z puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "najczęściej-używane-api", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#najczęściej-używane-api", children: _jsx(_components.span, { children: "#" }) }), "Najczęściej używane API"] }), "\n", _jsx(_components.p, { children: "W dalszych krokach będziemy polegać na API dostarczonych przez Jest, Puppeteer oraz jest-puppeteer, aby pomóc nam w testach." }), "\n", _jsxs(_components.p, { children: ["Jest głównie oferuje API do organizowania testów i sprawdzania oczekiwanych wyników. Możesz zapoznać się ze szczegółami w ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "dokumentacji" }), "."] }), "\n", _jsxs(_components.p, { children: ["API Puppeteer służą głównie do interakcji z przeglądarkami, a ich wsparcie dla testowania może nie być tak oczywiste. Możesz zapoznać się z ", _jsx(_components.a, { href: "https://pptr.dev/", children: "dokumentacją Puppeteer" }), ", aby zrozumieć, jakie funkcje oferuje. W naszych kolejnych przykładach testowych omówimy kilka powszechnych przypadków użycia."] }), "\n", _jsxs(_components.p, { children: ["Ponieważ API Puppeteer nie były pierwotnie zaprojektowane do testowania, pisanie testów z ich użyciem może być wyzwaniem. Aby uprościć proces pisania testów Puppeteer, jest-puppeteer zawiera wbudowaną bibliotekę zwaną ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Oferuje ona zestaw zwięzłych i przyjaznych interfejsów API. Biblioteka ta jest szczegółowo opisana w ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "dokumentacji" }), ", która wprowadza szereg użytecznych funkcji, jak pokazano w poniższych przykładach:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Sprawdź, czy obecna strona zawiera „Text in the page”\noczekiwanie\nawait (page).toMatchTextContent('Text in the page');\n\n// Sprawdź, czy obecna strona ma element div zawierający „Home”\noczekiwanie\nawait (page).toMatchElement('div', { text: 'Home' });\n\n// Sprawdź, czy przycisk zawierający tekst „Home” zostanie kliknięty\noczekiwanie\nawait (page).toClick('button', { text: 'Home' });\n\n// Sprawdź, czy formularz zostanie wypełniony\noczekiwanie\nawait (page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "W kolejnych przykładach połączymy API dostarczone przez te biblioteki, aby zrealizować nasze scenariusze testowe." }), "\n", _jsx(_components.p, { children: "Teraz nadszedł czas, aby rozpocząć naukę pisania kodu testowego z wykorzystaniem naszego prostego zadania do zrobienia." }), "\n", _jsxs(_components.h2, { id: "prosta-aplikacja-to-do", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#prosta-aplikacja-to-do", children: _jsx(_components.span, { children: "#" }) }), "Prosta aplikacja to-do"] }), "\n", _jsxs(_components.p, { children: ["Załóżmy, że mamy prostą aplikację to-do działającą pod adresem ", _jsx(_components.code, { children: "http://localhost:3000" }), ", a główny kod HTML tej aplikacji wygląda następująco:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Lista Alexa

\n
Kup jabłko
\n
Na Boże Narodzenie
\n \n
\n
Przeczytaj dokument wprowadzający Logto
\n
\n Link do dokumentu:\n Rozpocznij\n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Podczas testowania end-to-end chcemy objąć następujące scenariusze:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Po uzyskaniu dostępu do adresu URL aplikacji, aplikacja wraz z danymi powinna załadować się poprawnie." }), "\n", _jsx(_components.li, { children: "Przycisk sprawdzania pozycji powinien być możliwy do kliknięcia." }), "\n", _jsx(_components.li, { children: "Kliknięcie zewnętrznego linku w notatkach pozycji powinno otworzyć link w nowej karcie." }), "\n", _jsx(_components.li, { children: "Powinno być możliwe dodanie pozycji z formularza." }), "\n"] }), "\n", _jsx(_components.p, { children: "Później napiszemy kod testowy, aby zweryfikować te scenariusze." }), "\n", _jsxs(_components.h2, { id: "spodziewaj-się-że-aplikacja-i-jej-dane-zostały-załadowane", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#spodziewaj-się-że-aplikacja-i-jej-dane-zostały-załadowane", children: _jsx(_components.span, { children: "#" }) }), "Spodziewaj się, że aplikacja i jej dane zostały załadowane"] }), "\n", _jsx(_components.p, { children: "Uważamy, że aplikacja została pomyślnie załadowana, gdy spełnione są następujące warunki:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Element z ID „app” powinien istnieć na stronie po uzyskaniu dostępu do adresu URL aplikacji." }), "\n", _jsx(_components.li, { children: "Dane wewnątrz aplikacji powinny zostać poprawnie wyrenderowane." }), "\n"] }), "\n", _jsx(_components.p, { children: "Dlatego napisaliśmy poniższy kod testowy:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "to('powinno załadować aplikację pomyślnie', async () => {\n // Przejdź do strony aplikacji\n await page.goto('http://localhost:3000');\n\n // Czekaj na załadowanie aplikacji\n await page.waitForSelector('#app');\n\n // Spodziewaj się, że dane zostały załadowane\n oczekiwane\n await (page).toMatchElement('div[class=title]', {\n text: \"Lista Alexa\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "W kodzie:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " jest odpowiednikiem wpisania „", _jsx(_components.a, { href: "http://localhost:3000%E2%80%9D", children: "http://localhost:3000”" }), " w przeglądarce, co pozwala nawigować do dowolnego adresu URL."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " jest używane do oczekiwania na dopasowanie określonego selektora CSS do konkretnego elementu, z domyślnym czasem oczekiwania wynoszącym 30 sekund."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " pochodzi z biblioteki ", _jsx(_components.code, { children: "expect-puppeteer" }), ", jest podobne do ", _jsx(_components.code, { children: "page.waitForSelector" }), ", ale również obsługuje dopasowanie tekstu wewnątrz elementu. Dodatkowo, domyślny timeout dla ", _jsx(_components.code, { children: "toMatchElement" }), " wynosi tylko 500ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Może się to wydawać idealne na pierwszy rzut oka, ale podczas wykonywania tego testu i wdrażania go w środowisku CI czasami dochodzi do awarii po wielokrotnym wykonaniu. Wiadomość o niepowodzeniu wskazuje:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Po odczekaniu 500ms nie możemy znaleźć „div” z klasą „title” zawierającego tekst \"Lista Alexa\".\n" }) }), "\n", _jsx(_components.p, { children: "Na podstawie informacji o błędzie i faktu, że ten test przechodzi większość czasu, możemy wnioskować, że dane żądane przez aplikację mogą nie zawsze wrócić w ciągu pierwszych 500ms po załadowaniu aplikacji. W związku z tym chcemy poczekać na załadowanie danych przed dokonaniem asercji." }), "\n", _jsx(_components.p, { children: "Typowo istnieją dwie powszechne metody osiągnięcia tego:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Zwiększanie czasu oczekiwania na asercję" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Na podstawie wiadomości o błędzie możemy zobaczyć, że domyślny czas oczekiwania dla ", _jsx(_components.code, { children: "toMatchElement" }), " jest ustawiony na 500ms. Możemy zwiększyć czas oczekiwania, dodając opcję ", _jsx(_components.code, { children: "timeout" }), " do funkcji w ten sposób:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "oczekiwanie\nawait (page).toMatchElement('div[class=title]', {\n text: \"Lista Alexa\",\n timeout: 2000, // Zwiększenie do 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "To podejście może zmniejszyć częstotliwość niepowodzeń testów do pewnego stopnia, ale nie rozwiązuje problemu całkowicie, ponieważ nie wiemy, ile czasu zajmie załadowanie danych." }), "\n", _jsx(_components.p, { children: "Dlatego stosujemy tę metodę tylko wtedy, gdy jesteśmy pewni wymaganego czasu oczekiwania, na przykład w scenariuszach takich jak „podpowiedź pojawia się po najechaniu na element przez więcej niż 2 sekundy.”" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Oczekiwanie na zakończenie żądania sieciowego przed asercją" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["To jest właściwe podejście. Chociaż nie wiemy, ile czasu zajmie żądanie danych, zawsze bezpiecznym wyborem jest oczekiwanie na zakończenie żądania sieciowego. W tym momencie możemy użyć ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), ", aby czekać na zakończenie żądań sieciowych:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "to('powinno załadować aplikację pomyślnie', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Czekaj na zakończenie żądań sieciowych.\n\t * Dodaj tutaj, aby upewnić się, że zarówno aplikacja, jak i dane zostały załadowane.\n\t */\n\tawait page.waitForNavigation({ waitUntil: 'networkidle0' });\n\n\tawait page.waitForSelector('#app');\n\toczekiwanie\n\tawait (page).toMatchElement('div[class=title]', {\n\t\ttext: \"Lista Alexa\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "W ten sposób, zanim wykonamy asercję dla aplikacji i jej załadowanych danych, możemy upewnić się, że nasze żądania sieciowe zostały zakończone. To zapewnia, że test konsekwentnie przynosi prawidłowe wyniki." }), "\n", _jsxs(_components.h2, { id: "spodziewaj-się-kliknięcia-określonego-przycisku", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#spodziewaj-się-kliknięcia-określonego-przycisku", children: _jsx(_components.span, { children: "#" }) }), "Spodziewaj się kliknięcia określonego przycisku"] }), "\n", _jsx(_components.p, { children: "Następnie testujemy funkcjonalność kliknięcia przycisku „sprawdź” wewnątrz pozycji." }), "\n", _jsxs(_components.p, { children: ["W przykładowej aplikacji zauważyliśmy, że wszystkie pozycje mają taką samą strukturę. Ich przyciski „sprawdź” mają selektor CSS ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", a tekst przycisku to zawsze „Sprawdź”. Oznacza to, że nie możemy bezpośrednio określić, który przycisk „sprawdź” pozycji kliknąć. W związku z tym potrzebujemy nowego rozwiązania."] }), "\n", _jsx(_components.p, { children: "Załóżmy, że chcemy kliknąć przycisk „sprawdź” dla pozycji „Przeczytaj dokument wprowadzający Logto”. Możemy to rozłożyć na dwa kroki:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Najpierw uzyskaj referencję do tej konkretnej pozycji." }), "\n", _jsx(_components.li, { children: "Następnie kliknij przycisk „sprawdź” znajdujący się w tej pozycji." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "to('powinno móc kliknąć przycisk „sprawdź” pozycji „przeczytaj dokument”', async () => {\n // Uzyskaj referencję do pozycji „przeczytaj dokument”\n const readDocItem = oczekiwanie\n await (page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Przeczytaj dokument wprowadzający Logto' }\n );\n\n // Spodziewaj się kliknięcia powiązanego przycisku\n oczekiwanie\n await (readDocItem).toClick('button', { text: 'Sprawdź' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Jak pokazano w kodzie, używamy funkcji ", _jsx(_components.code, { children: "toMatchElement" }), ", aby dopasować pozycję z ", _jsx(_components.code, { children: "itemName" }), " ustawionym na „Przeczytaj dokument wprowadzający Logto”. Następnie używamy referencji ", _jsx(_components.code, { children: "readDocItem" }), ", aby kliknąć przycisk z zawartością tekstową „Sprawdź” poniżej."] }), "\n", _jsxs(_components.p, { children: ["Warto zauważyć, że podczas uzyskiwania ", _jsx(_components.code, { children: "readDocItem" }), " używamy selektora CSS ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Ten selektor dopasowuje element ", _jsx(_components.code, { children: "li" }), " korzenia pozycji, a nie ", _jsx(_components.code, { children: "itemName" }), " wewnątrz, ponieważ później zamierzamy kliknąć ", _jsx(_components.code, { children: "button" }), " pod tagiem ", _jsx(_components.code, { children: "li" }), "."] }), "\n", _jsxs(_components.p, { children: ["Użycie ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " jest podobne do ", _jsx(_components.code, { children: "toMatchElement" }), ". W przykładowym kodzie przekazujemy ", _jsx(_components.code, { children: "{ text: 'Sprawdź' }" }), ", aby dokładniej dopasować ", _jsx(_components.code, { children: "textContent" }), " przycisku. Jednak możesz zdecydować, czy chcesz dopasowywać zawartość tekstową przycisku, czy nie, w zależności od swoich potrzeb."] }), "\n", _jsxs(_components.h2, { id: "spodziewaj-się-że-zewnętrzny-link-zostanie-otwarty-w-nowej-karcie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#spodziewaj-się-że-zewnętrzny-link-zostanie-otwarty-w-nowej-karcie", children: _jsx(_components.span, { children: "#" }) }), "Spodziewaj się, że zewnętrzny link zostanie otwarty w nowej karcie"] }), "\n", _jsx(_components.p, { children: "Następnie chcemy przetestować, czy możemy otworzyć zewnętrzny link w nowej karcie po kliknięciu go w notatkach pozycji." }), "\n", _jsx(_components.p, { children: "W przykładowej aplikacji zauważyliśmy, że pozycja „Przeczytaj dokument wprowadzający Logto” ma zewnętrzny link prowadzący do dokumentacji Logto w swoich notatkach. Oto nasz kod testowy:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "to('powinno otworzyć zewnętrzny link w nowej karcie', async () => {\n // Zawęź się do konkretnej pozycji, uzyskując referencję do pozycji „przeczytaj dokument”\n const readDocItem = oczekiwanie\n await (page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Przeczytaj dokument wprowadzający Logto' }\n );\n\n oczekiwanie\n await (readDocItem).toClick('div[class=itemNotes] a', { text: 'Rozpocznij' });\n\n const target = oczekiwanie\n await (browser).waitForTarget(\n (target) => target.url() === 'https://docs.logto.io/docs/tutorials/get-started'\n );\n\n const logtoDocPage = oczekiwanie\n await (target).page();\n oczekiwane\n expect(logtoDocPage).toBeTruthy();\n\n // Pamiętaj, aby zamknąć stronę po zakończeniu testowania\n oczekiwanie\n await (logtoDocPage?.close());\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["W kodzie używamy ", _jsx(_components.code, { children: "toClick" }), ", aby kliknąć link wewnątrz ", _jsx(_components.code, { children: "itemNotes" }), "."] }), "\n", _jsxs(_components.p, { children: ["Następnie używamy ", _jsx(_components.code, { children: "browser.waitForTarget" }), ", aby uchwycić nowo otwartą kartę z adresem URL „", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started.%E2%80%9D", children: "https://docs.logto.io/docs/tutorials/get-started.”" })] }), "\n", _jsxs(_components.p, { children: ["Po uzyskaniu karty używamy ", _jsx(_components.code, { children: "target.page()" }), ", aby uzyskać instancję strony dokumentacji Logto i dalej sprawdzać, czy strona została załadowana."] }), "\n", _jsx(_components.p, { children: "Pamiętaj również, aby zamknąć nowo otwartą stronę po zakończeniu naszego testu." }), "\n", _jsxs(_components.h2, { id: "spodziewaj-się-że-element-zostanie-utworzony-z-formularza", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#spodziewaj-się-że-element-zostanie-utworzony-z-formularza", children: _jsx(_components.span, { children: "#" }) }), "Spodziewaj się, że element zostanie utworzony z formularza"] }), "\n", _jsx(_components.p, { children: "Teraz chcemy przetestować funkcjonalność dodawania elementu." }), "\n", _jsx(_components.p, { children: "Musimy wypełnić nazwę elementu i notatki elementu w formularzu, kliknąć przycisk „Dodaj” i sprawdzić, czy treść, którą dodaliśmy, pojawia się na liście:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "to('powinno stworzyć element z formularza', async () => {\n // Wypełnij formularz i wyślij\n oczekiwanie\n await (page).toFill('form input[name=itemName]', 'Skontaktuj się z Johnem');\n oczekiwanie\n await (page).toFill('form input[name=itemNotes]', 'Wyślij e-mail do john@fake.com');\n oczekiwanie\n await (page).toClick('form button[type=submit]', { text: 'Dodaj' });\n\n // Spodziewaj się, że element został utworzony\n oczekiwanie\n await (page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Skontaktuj się z Johnem',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Zauważ, że używamy funkcji ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), ", aby wypełnić treść formularza. Funkcja ta zastępuje całą zawartość w polu wprowadzania ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Jeśli chcesz dodać kilka znaków do pola wprowadzania bez zastępowania istniejącej zawartości, możesz użyć ", _jsx(_components.code, { children: "page.type(selector, content)" }), ", aby bezpośrednio dodać żądaną treść do pola wprowadzania."] }), "\n", _jsxs(_components.p, { children: ["Jednak gdy mamy wiele pól do wypełnienia w naszym formularzu, wielokrotne wywoływanie ", _jsx(_components.code, { children: "toFill" }), " nie jest wygodne. W takim przypadku możemy użyć następującego podejścia, aby wypełnić całą zawartość w jednym wywołaniu:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "oczekiwanie\nawait (page).toFillForm('form', {\n itemName: 'Skontaktuj się z Johnem',\n itemNotes: 'Wyślij e-mail do john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Podany klucz obiektu to atrybut name elementu wprowadzania." }), "\n", _jsxs(_components.h2, { id: "podsumowanie", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#podsumowanie", children: _jsx(_components.span, { children: "#" }) }), "Podsumowanie"] }), "\n", _jsx(_components.p, { children: "Omówiliśmy prosty przykład, aby przedstawić powszechne wymagania dotyczące testowania i techniki pisania odpowiedniego kodu, gdy używamy jest-puppeteer do testowania end-to-end. Mamy nadzieję, że pomoże ci to szybko zrozumieć podstawy pisania kodu testowego jest-puppeteer." }), "\n", _jsx(LogtoCloudButton, { children: "Wypróbuj Logto już dziś" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }