"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "einführung-in-end-to-end-tests-mit-jest-puppeteer", "hProperties": { "id": "einführung-in-end-to-end-tests-mit-jest-puppeteer" } }, "depth": 2, "value": "Einführung in End-to-End-Tests mit jest-puppeteer" }, { "data": { "id": "einrichten-ihrer-testumgebung", "hProperties": { "id": "einrichten-ihrer-testumgebung" } }, "depth": 2, "value": "Einrichten Ihrer Testumgebung" }, { "data": { "id": "häufig-verwendete-apis", "hProperties": { "id": "häufig-verwendete-apis" } }, "depth": 2, "value": "Häufig verwendete APIs" }, { "data": { "id": "die-einfache-to-do-app", "hProperties": { "id": "die-einfache-to-do-app" } }, "depth": 2, "value": "Die einfache To-do-App" }, { "data": { "id": "erwarte-dass-die-app-und-ihre-daten-geladen-wurden", "hProperties": { "id": "erwarte-dass-die-app-und-ihre-daten-geladen-wurden" } }, "depth": 2, "value": "Erwarte, dass die App und ihre Daten geladen wurden" }, { "data": { "id": "erwarte-dass-ein-spezieller-button-angeklickt-wird", "hProperties": { "id": "erwarte-dass-ein-spezieller-button-angeklickt-wird" } }, "depth": 2, "value": "Erwarte, dass ein spezieller Button angeklickt wird" }, { "data": { "id": "erwarte-dass-ein-externer-link-in-einem-neuen-tab-geöffnet-wird", "hProperties": { "id": "erwarte-dass-ein-externer-link-in-einem-neuen-tab-geöffnet-wird" } }, "depth": 2, "value": "Erwarte, dass ein externer Link in einem neuen Tab geöffnet wird" }, { "data": { "id": "erwarte-dass-ein-element-aus-dem-formular-erstellt-wird", "hProperties": { "id": "erwarte-dass-ein-element-aus-dem-formular-erstellt-wird" } }, "depth": 2, "value": "Erwarte, dass ein Element aus dem Formular erstellt wird" }, { "data": { "id": "zusammenfassung", "hProperties": { "id": "zusammenfassung" } }, "depth": 2, "value": "Zusammenfassung" }]; const readingTime = { "minutes": 8, "words": 2293, "text": "8 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: "Als Teil unseres Engagements für die Qualität von Logto und kontinuierliche Verbesserungen setzen wir jest-puppeteer für automatisierte End-to-End-Tests ein. Dadurch können wir die Entwicklung von Logto ohne Unterbrechungen schnell vorantreiben." }), "\n", _jsx(_components.p, { children: "In diesem Artikel teilen wir unsere Erfahrungen mit dem Schreiben effizienter jest-puppeteer Testskripts anhand eines simplen To-Do App Beispiels. Unser Ziel ist es, Ihnen zu helfen, schnell mit dem Schreiben von jest-puppeteer Testcode für Ihre eigenen Projekte zu beginnen." }), "\n", _jsxs(_components.h2, { id: "einführung-in-end-to-end-tests-mit-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einführung-in-end-to-end-tests-mit-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Einführung in End-to-End-Tests mit jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["End-to-End-Tests sind eine Möglichkeit, sicherzustellen, dass Ihre Anwendung aus Sicht des Benutzers korrekt funktioniert. Um dies zu erreichen, nutzen wir zwei wesentliche Werkzeuge: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " und ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " ist ein beliebtes JavaScript-Test-Framework, das eine benutzerfreundliche API zum Schreiben von Tests und Assertions bietet. Es wird häufig für Unit- und Integrationstests verwendet."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " ist eine von dem Chrome-Team entwickelte Node.js-Bibliothek, die eine High-Level-API für die Steuerung von Headless-Chrome- oder Chromium-Browsern bietet. Dies macht es zu einer idealen Wahl für die Automatisierung von Browserinteraktionen in End-to-End-Tests."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " ist ein Jest-Prerender, der End-to-End-Tests mit Puppeteer ermöglicht. Es bietet eine unkomplizierte API zum Starten neuer Browserinstanzen und zur Interaktion mit Webseiten über diese."] }), "\n", _jsx(_components.p, { children: "Nun, da Sie ein grundlegendes Verständnis der wesentlichen Werkzeuge haben, vertiefen wir uns in das Einrichten Ihrer Testumgebung." }), "\n", _jsxs(_components.h2, { id: "einrichten-ihrer-testumgebung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#einrichten-ihrer-testumgebung", children: _jsx(_components.span, { children: "#" }) }), "Einrichten Ihrer Testumgebung"] }), "\n", _jsx(_components.p, { children: "Das Einrichten Ihrer Testumgebung für End-to-End-Tests mit jest-puppeteer ist ein einfacher Prozess, der aus drei Hauptschritten besteht:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Installieren Sie Abhängigkeiten" }), "\n"] }), "\n", _jsx(_components.p, { children: "Öffnen Sie in Ihrem Projekt (oder erstellen Sie ein neues Projekt) das Terminal und führen Sie aus:" }), "\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: ["Gehen Sie dann zu den ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " und installieren Sie Chromium (das für Puppeteer benötigt wird):"] }), "\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: "Konfigurieren Sie Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Als nächstes müssen Sie Jest so konfigurieren, dass es nahtlos mit Puppeteer zusammenarbeitet." }), "\n", _jsxs(_components.p, { children: ["Erstellen Sie eine Jest-Konfigurationsdatei (z. B. ", _jsx(_components.code, { children: "jest.config.js" }), ") im Stammverzeichnis Ihres Projekts, falls Sie noch keine haben. Geben Sie in dieser Konfigurationsdatei jest-puppeteer als Voreinstellung an:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Andere Jest-Konfigurationen...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Sie können bei Bedarf auch andere Jest-Einstellungen in dieser Datei anpassen. Weitere Informationen zur Anpassung von Jest-Konfigurationen finden Sie in der ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "Jest-Konfiguration" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Schreiben Sie Ihre Tests" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Erstellen Sie Testdateien in Ihrem Projekt, üblicherweise mit der Erweiterung ", _jsx(_components.code, { children: ".test.js" }), ". Jest wird diese Testdateien automatisch entdecken und ausführen."] }), "\n", _jsxs(_components.p, { children: ["Hier ist ein Beispiel aus dem ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest-Doc" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "describe('Google', () => {\n beforeAll(async () => {\n await page.goto('https://google.com');\n });\n\n it('should have the title \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Führen Sie dann den Befehl aus, um den Test zu starten:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Wenn Sie diesen drei Schritten folgen, haben Sie eine gut konfigurierte Testumgebung für die Durchführung von End-to-End-Tests mit jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Bitte beachten Sie jedoch, dass dies nur ein einfaches Beispiel ist. Für detailliertere Informationen zur Umgebungskonfiguration, verweisen wir auf die entsprechende Dokumentation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Erste Schritte" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Verwendung mit Puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "häufig-verwendete-apis", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#häufig-verwendete-apis", children: _jsx(_components.span, { children: "#" }) }), "Häufig verwendete APIs"] }), "\n", _jsx(_components.p, { children: "In den folgenden Schritten werden wir uns auf APIs verlassen, die von Jest, Puppeteer und jest-puppeteer bereitgestellt werden, um uns bei unseren Tests zu unterstützen." }), "\n", _jsxs(_components.p, { children: ["Jest bietet hauptsächlich APIs zum Organisieren von Tests und zum Behaupten von erwarteten Ergebnissen. Sie können die spezifischen Details in der ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "Dokumentation" }), " nachlesen."] }), "\n", _jsxs(_components.p, { children: ["Die APIs von Puppeteer sind hauptsächlich zur Interaktion mit Browsern entwickelt worden, und ihre Unterstützung für Tests ist möglicherweise nicht so einfach. Sie können die ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer-Dokumentation" }), " zu Rate ziehen, um die Funktionalitäten zu verstehen, die sie bietet. In unseren anschließenden Testbeispielen werden wir einige gängige Anwendungsfälle behandeln."] }), "\n", _jsxs(_components.p, { children: ["Da die APIs von Puppeteer ursprünglich nicht für Tests konzipiert waren, kann das Schreiben von Tests damit herausfordernd sein. Um den Prozess des Schreibens von Puppeteer-Tests zu vereinfachen, beinhaltet jest-puppeteer eine eingebettete Bibliothek namens ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Sie bietet eine Reihe von knappen und benutzerfreundlichen APIs. Die Bibliothek wird in ihrer ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "Dokumentation" }), " detailliert vorgestellt, die verschiedene hilfreiche Features einführt, wie in den folgenden Beispielen gezeigt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Assert that the current page contains 'Text in the page'\nawait expect(page).toMatchTextContent('Text in the page');\n\n// Assert that the current page has a div element contains 'Home'\nawait expect(page).toMatchElement('div', { text: 'Home' });\n\n// Assert that a button containing text \"Home\" will be clicked\nawait expect(page).toClick('button', { text: 'Home' });\n\n// Assert that a form will be filled\nawait expect(page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "In den folgenden Beispielen kombinieren wir die APIs, die von diesen Bibliotheken bereitgestellt werden, um unsere Testszenarien zu vervollständigen." }), "\n", _jsx(_components.p, { children: "Nun ist es an der Zeit, zu lernen, wie man Testcode mit unserer simplen To-do-App schreibt." }), "\n", _jsxs(_components.h2, { id: "die-einfache-to-do-app", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#die-einfache-to-do-app", children: _jsx(_components.span, { children: "#" }) }), "Die einfache To-do-App"] }), "\n", _jsxs(_components.p, { children: ["Angenommen, wir haben eine einfache To-do-App, die unter ", _jsx(_components.code, { children: "http://localhost:3000" }), " läuft, der Haupt-HTML-Code für diese App lautet wie folgt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Alex's Liste

\n
Einen Apfel kaufen
\n
Für Weihnachten
\n \n
\n
Logto start-Dokumentation lesen
\n
\n Dok.-Link:\n Loslegen \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Bei der Durchführung von End-to-End-Tests streben wir an, die folgenden Szenarien abzudecken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Wenn wir auf die URL der App zugreifen, sollten die App und ihre Daten korrekt laden." }), "\n", _jsx(_components.li, { children: "Der Prüfknopf des Elements sollte anklickbar sein." }), "\n", _jsx(_components.li, { children: "Das Anklicken eines externen Links innerhalb der Elementnotizen sollte den Link in einem neuen Tab öffnen." }), "\n", _jsx(_components.li, { children: "Es sollte möglich sein, über das Formular ein Element hinzuzufügen." }), "\n"] }), "\n", _jsx(_components.p, { children: "Später werden wir Testcode schreiben, um diese Szenarien zu validieren." }), "\n", _jsxs(_components.h2, { id: "erwarte-dass-die-app-und-ihre-daten-geladen-wurden", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erwarte-dass-die-app-und-ihre-daten-geladen-wurden", children: _jsx(_components.span, { children: "#" }) }), "Erwarte, dass die App und ihre Daten geladen wurden"] }), "\n", _jsx(_components.p, { children: "Wir gehen davon aus, dass die App erfolgreich geladen hat, wenn die folgenden Bedingungen erfüllt sind:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Ein Element mit der ID \"app\" sollte auf der Seite existieren, nachdem auf die URL der App zugegriffen wurde." }), "\n", _jsx(_components.li, { children: "Die Daten innerhalb der App sollten korrekt gerendert werden." }), "\n"] }), "\n", _jsx(_components.p, { children: "Daher haben wir den folgenden Testcode geschrieben:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('should load the app successfully', async () => {\n // Go to the app page\n await page.goto('http://localhost:3000');\n\n // Wait for the app to be loaded\n await page.waitForSelector('#app');\n\n // Expect the data to be loaded\n await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex's Liste\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "In dem Code:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " entspricht dem Eingeben von \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" im Browser, was es Ihnen ermöglicht, zu jeder URL zu navigieren."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " wird verwendet, um auf ein spezifisches CSS-Selektor zu warten, das ein bestimmtes Element entspricht, mit einer standardmäßigen Wartezeit von 30 Sekunden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " stammt aus der ", _jsx(_components.code, { children: "expect-puppeteer" }), "-Bibliothek, Es ist ähnlich wie ", _jsx(_components.code, { children: "page.waitForSelector" }), ", unterstützt aber auch die Übereinstimmung des Textes innerhalb eines Elements. Darüber hinaus beträgt die Standard-Zeitüberschreitung für ", _jsx(_components.code, { children: "toMatchElement" }), " nur 500ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Auf den ersten Blick mag es perfekt erscheinen, aber beim Ausführen dieses Tests und beim Bereitstellen in einer CI-Umgebung scheitert es gelegentlich nach mehreren Ausführungen. Die Fehlermeldung deutet darauf hin:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Nach 500ms Wartezeit können wir kein “div” mit einem Klassennamen “title” und dem Text \"Alex's Liste\" finden.\n" }) }), "\n", _jsx(_components.p, { children: "Basierend auf der Fehlerinformation und der Tatsache, dass dieser Test die meiste Zeit erfolgreich ist, können wir schlussfolgern, dass die von der App angeforderten Daten möglicherweise nicht immer innerhalb der ersten 500ms nach dem Laden der App zurückkehren. Daher möchten wir auf das Laden der Daten warten, bevor wir die Behauptung aufstellen." }), "\n", _jsx(_components.p, { children: "Üblicherweise gibt es zwei gängige Ansätze, um dies zu erreichen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Erhöhen Sie die Wartezeit für die Behauptung" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Aus der Fehlermeldung können wir entnehmen, dass die standardmäßige Wartezeit für ", _jsx(_components.code, { children: "toMatchElement" }), " auf 500ms festgelegt ist. Wir können die Wartezeit erhöhen, indem wir die ", _jsx(_components.code, { children: "timeout" }), "-Option der Funktion hinzufügen, wie in diesem Beispiel:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex's Liste\",\n timeout: 2000, // Erhöhen auf 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Dieser Ansatz kann das Auftreten von fehlgeschlagenen Tests bis zu einem gewissen Grad reduzieren, löst das Problem aber nicht vollständig, da wir nicht genau wissen, wie viel Zeit für das Abrufen der Daten benötigt wird." }), "\n", _jsx(_components.p, { children: "Daher verwenden wir diesen Ansatz nur, wenn wir uns über die erforderliche Wartezeit sicher sind, wie in Szenarien wie \"Ein Tooltip erscheint, nachdem man über ein Element für mehr als 2 Sekunden geschwebt hat.”" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Warten Sie auf den Abschluss der Netzwerkanfrage, bevor Sie eine Behauptung aufstellen" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Dies ist der richtige Ansatz. Obwohl wir möglicherweise nicht wissen, wie lang die Datenanfrage dauern wird, ist es immer eine sichere Wahl, auf das Beenden der Netzwerkanfrage zu warten. An diesem Punkt können wir ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " verwenden, um auf das Beenden der Netzwerkanfragen zu warten:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('should load the app successfully', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Warten Sie, bis die Netzwerkanfragen beendet sind.\n\t * Hinzufügen hier, um sicherzustellen, dass sowohl die App als auch die Daten geladen wurden.\n\t */\n\tawait page.waitForNavigation({ waitUntil: 'networkidle0' });\n\n\tawait page.waitForSelector('#app');\n\tawait expect(page).toMatchElement('div[class=title]', {\n\t\ttext: \"Alex's Liste\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "So können wir, bevor wir die Behauptung für die App und ihre geladenen Daten durchführen, sicherstellen, dass unsere Netzwerkanfragen bereits abgeschlossen sind. Dies gewährleistet, dass der Test konsequent die richtigen Ergebnisse liefert." }), "\n", _jsxs(_components.h2, { id: "erwarte-dass-ein-spezieller-button-angeklickt-wird", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erwarte-dass-ein-spezieller-button-angeklickt-wird", children: _jsx(_components.span, { children: "#" }) }), "Erwarte, dass ein spezieller Button angeklickt wird"] }), "\n", _jsx(_components.p, { children: "Als nächstes testen wir die Funktion des Anklickens des Prüfknopfes innerhalb eines Elements." }), "\n", _jsxs(_components.p, { children: ["In der Beispiel-App haben wir festgestellt, dass alle Elemente dieselbe Struktur teilen. Ihre Prüfknöpfe haben den CSS-Selektor ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", und der Text des Knopfes ist immer \"Prüfen\". Das bedeutet, dass wir nicht direkt spezifizieren können, welchen Prüfknopf des Elements wir anklicken sollen. Daher benötigen wir eine neue Lösung."] }), "\n", _jsx(_components.p, { children: "Angenommen, wir möchten den Prüfknopf des Elements \"Logto start-Dokumentation lesen\" anklicken. Wir können dies in zwei Schritte unterteilen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Zunächst eine Referenz zu diesem speziellen Element erhalten." }), "\n", _jsx(_components.li, { children: "Dann klicken Sie auf den Prüfknopf, der sich innerhalb dieses Elements befindet." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('should be able to click the check button of the read doc item', async () => {\n // Get the read doc item reference\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Logto start-Dokumentation lesen' }\n );\n\n // Expect to click the related button\n await expect(readDocItem).toClick('button', { text: 'Prüfen' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Wie im Code gezeigt, verwenden wir die Funktion ", _jsx(_components.code, { children: "toMatchElement" }), ", um das Element mit dem ", _jsx(_components.code, { children: "itemName" }), " auf \"Logto start-Dokumentation lesen\" abzugleichen. Dann verwenden wir die ", _jsx(_components.code, { children: "readDocItem" }), " Referenz, um den Knopf mit dem Textinhalt 'Prüfen' unterhalb davon zu klicken."] }), "\n", _jsxs(_components.p, { children: ["Es ist wichtig zu beachten, dass bei der Beschaffung der ", _jsx(_components.code, { children: "readDocItem" }), ", der verwendete CSS-Selektor ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), " ist. Dieser Selektor passt zum Wurzelelement ", _jsx(_components.code, { children: "li" }), " des Elements, nicht zum ", _jsx(_components.code, { children: "itemName" }), " darin, denn wir beabsichtigen, später den ", _jsx(_components.code, { children: "button" }), " unter dem ", _jsx(_components.code, { children: "li" }), "-Tag anzuklicken."] }), "\n", _jsxs(_components.p, { children: ["Die Verwendung von ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " ähnelt ", _jsx(_components.code, { children: "toMatchElement" }), ". Im Beispielcode geben wir ", _jsx(_components.code, { children: "{ text: 'Prüfen' }" }), " weiter, um den ", _jsx(_components.code, { children: "textContent" }), " des Knopfes weiter abzugleichen. Je nach Bedarf können Sie jedoch wählen, ob Sie den Textinhalt des Knopfes abgleichen wollen oder nicht."] }), "\n", _jsxs(_components.h2, { id: "erwarte-dass-ein-externer-link-in-einem-neuen-tab-geöffnet-wird", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erwarte-dass-ein-externer-link-in-einem-neuen-tab-geöffnet-wird", children: _jsx(_components.span, { children: "#" }) }), "Erwarte, dass ein externer Link in einem neuen Tab geöffnet wird"] }), "\n", _jsx(_components.p, { children: "Als nächstes wollen wir testen, ob wir einen externen Link in einem neuen Tab öffnen können, wenn wir darauf innerhalb der Elementnotizen klicken." }), "\n", _jsx(_components.p, { children: "In der Beispiel-App haben wir festgestellt, dass das Element \"Logto start-Dokumentation lesen\" einen externen Link zur Logto-Dokumentation innerhalb seiner Notizen hat. Hier ist unser Testcode:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('should open the an external link in a new tab', async () => {\n // Narrow down to the specific item by geting the read doc item reference\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Logto start-Dokumentation lesen' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Loslegen' });\n\n const target = await browser.waitForTarget(\n (target) => target.url() === 'https://docs.logto.io/docs/tutorials/get-started'\n );\n\n const logtoDocPage = await target.page();\n expect(logtoDocPage).toBeTruthy();\n\n // Remember to close the page after testing\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["In dem Code nutzen wir ", _jsx(_components.code, { children: "toClick" }), " um auf den Link innerhalb der ", _jsx(_components.code, { children: "itemNotes" }), " zu klicken."] }), "\n", _jsxs(_components.p, { children: ["Anschließend verwenden wir ", _jsx(_components.code, { children: "browser.waitForTarget" }), ", um einen neu geöffneten Tab mit der URL \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started", children: "https://docs.logto.io/docs/tutorials/get-started" }), ".\" zu erfassen."] }), "\n", _jsxs(_components.p, { children: ["Nachdem wir den Tab erhalten haben, verwenden wir ", _jsx(_components.code, { children: "target.page()" }), ", um eine Instanz der Logto doc Seite zu bekommen und weiter zu überprüfen, ob die Seite geladen wurde."] }), "\n", _jsx(_components.p, { children: "Vergessen Sie nicht, die neu geöffnete Seite nach Beendigung unseres Tests zu schließen." }), "\n", _jsxs(_components.h2, { id: "erwarte-dass-ein-element-aus-dem-formular-erstellt-wird", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#erwarte-dass-ein-element-aus-dem-formular-erstellt-wird", children: _jsx(_components.span, { children: "#" }) }), "Erwarte, dass ein Element aus dem Formular erstellt wird"] }), "\n", _jsx(_components.p, { children: "Jetzt wollen wir die Funktion des Hinzufügens eines Elements testen." }), "\n", _jsx(_components.p, { children: "Wir müssen den Namen des Elements und die Notizen des Elements in das Formular eintragen, auf den Button \"Hinzufügen\" klicken und prüfen, ob der von uns hinzugefügte Inhalt in der Liste erscheint:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('sollte ein Element aus dem Formular erstellen', async () => {\n // Füllen Sie das Formular aus und senden Sie es ab\n await expect(page).toFill('form input[name=itemName]', 'Kontakt mit John');\n await expect(page).toFill('form input[name=itemNotes]', 'Sende eine E-Mail an john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Hinzufügen' });\n\n // Erwarten Sie, dass das Element erstellt wurde\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Kontakt mit John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Sie werden bemerken, dass wir die Funktion ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " verwenden, um den Formularinhalt auszufüllen. Diese Funktion ersetzt alle Inhalte in der Eingabe durch den ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Wenn Sie einige Zeichen zur Eingabe hinzufügen möchten, ohne den vorhandenen Inhalt zu ersetzen, können Sie ", _jsx(_components.code, { children: "page.type(selector, content)" }), " verwenden, um den gewünschten Inhalt direkt in die Eingabe einzufügen."] }), "\n", _jsxs(_components.p, { children: ["Wenn wir jedoch viele Felder in unserem Formular ausfüllen müssen, ist es nicht praktisch, ", _jsx(_components.code, { children: "toFill" }), " mehrmals aufzurufen. In diesem Fall können wir den folgenden Ansatz verwenden, um alle Inhalte auf einmal auszufüllen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Kontakt mit John',\n itemNotes: 'Sende eine E-Mail an john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Der bereitgestellte Objektschlüssel ist das name-Attribut des Eingabeelements." }), "\n", _jsxs(_components.h2, { id: "zusammenfassung", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#zusammenfassung", children: _jsx(_components.span, { children: "#" }) }), "Zusammenfassung"] }), "\n", _jsx(_components.p, { children: "Wir haben ein einfaches Beispiel behandelt, um gängige Testanforderungen und entsprechende Codierschreibtechniken bei der Verwendung von jest-puppeteer für End-to-End-Tests vorzustellen. Wir hoffen, dass es Ihnen helfen kann, die Grundlagen des Schreibens von jest-puppeteer Testcode schnell zu erlernen." }), "\n", _jsx(LogtoCloudButton, { children: "Probieren Sie Logto heute aus" })] }); } 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."); }