"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "inleiding-tot-end-to-end-testen-met-jest-puppeteer", "hProperties": { "id": "inleiding-tot-end-to-end-testen-met-jest-puppeteer" } }, "depth": 2, "value": "Inleiding tot end-to-end testen met jest-puppeteer" }, { "data": { "id": "de-testomgeving-instellen", "hProperties": { "id": "de-testomgeving-instellen" } }, "depth": 2, "value": "De testomgeving instellen" }, { "data": { "id": "veel-gebruikte-apis", "hProperties": { "id": "veel-gebruikte-apis" } }, "depth": 2, "value": "Veel gebruikte API's" }, { "data": { "id": "de-eenvoudige-takenlijst-app", "hProperties": { "id": "de-eenvoudige-takenlijst-app" } }, "depth": 2, "value": "De eenvoudige takenlijst-app" }, { "data": { "id": "verwacht-dat-de-app-en-zijn-gegevens-zijn-geladen", "hProperties": { "id": "verwacht-dat-de-app-en-zijn-gegevens-zijn-geladen" } }, "depth": 2, "value": "Verwacht dat de app en zijn gegevens zijn geladen" }, { "data": { "id": "verwacht-om-op-een-specifieke-knop-te-klikken", "hProperties": { "id": "verwacht-om-op-een-specifieke-knop-te-klikken" } }, "depth": 2, "value": "Verwacht om op een specifieke knop te klikken" }, { "data": { "id": "verwacht-dat-een-externe-link-wordt-geopend-in-een-nieuw-tabblad", "hProperties": { "id": "verwacht-dat-een-externe-link-wordt-geopend-in-een-nieuw-tabblad" } }, "depth": 2, "value": "Verwacht dat een externe link wordt geopend in een nieuw tabblad" }, { "data": { "id": "verwacht-een-item-te-maken-via-het-formulier", "hProperties": { "id": "verwacht-een-item-te-maken-via-het-formulier" } }, "depth": 2, "value": "Verwacht een item te maken via het formulier" }, { "data": { "id": "samenvatting", "hProperties": { "id": "samenvatting" } }, "depth": 2, "value": "Samenvatting" }]; const readingTime = { "minutes": 8, "words": 2394, "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 onderdeel van onze toewijding aan het waarborgen van de kwaliteit van Logto en voortdurende verbetering, gebruiken we jest-puppeteer voor end-to-end geautomatiseerde tests. Dit stelt ons in staat om snel voort te bouwen op de ontwikkeling van Logto zonder onderbrekingen." }), "\n", _jsx(_components.p, { children: "In dit artikel delen we onze ervaring met het schrijven van efficiënte jest-puppeteer testscripts met behulp van een eenvoudige takenlijst-app als voorbeeld. Ons doel is om jou snel aan de slag te helpen met het schrijven van jest-puppeteer testcode voor je eigen projecten." }), "\n", _jsxs(_components.h2, { id: "inleiding-tot-end-to-end-testen-met-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#inleiding-tot-end-to-end-testen-met-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Inleiding tot end-to-end testen met jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["End-to-end testen is een manier om ervoor te zorgen dat je applicatie correct werkt vanuit het perspectief van de gebruiker. Om dit te bereiken, gebruiken we twee essentiële tools: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " en ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " is een populair JavaScript testframework dat een gebruiksvriendelijke API biedt voor het schrijven van tests en beweringen. Het wordt veel gebruikt voor unit- en integratietesten."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " is een Node.js bibliotheek ontwikkeld door het Chrome-team die een hoog niveau API biedt voor het besturen van headless Chrome of Chromium browsers. Dit maakt het een ideale keuze voor het automatiseren van browserinteracties in end-to-end tests."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " is een Jest-preset die end-to-end testen met Puppeteer mogelijk maakt. Het biedt een eenvoudige API voor het starten van nieuwe browserinstanties en het interactief omgaan met webpagina's via hen."] }), "\n", _jsx(_components.p, { children: "Nu je een basisbegrip hebt van de essentiële tools, laten we de opzet van je testomgeving in duiken." }), "\n", _jsxs(_components.h2, { id: "de-testomgeving-instellen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-testomgeving-instellen", children: _jsx(_components.span, { children: "#" }) }), "De testomgeving instellen"] }), "\n", _jsx(_components.p, { children: "Het instellen van je testomgeving voor end-to-end testen met jest-puppeteer is een eenvoudig proces dat uit drie hoofd stappen bestaat:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Installeer afhankelijkheden" }), "\n"] }), "\n", _jsx(_components.p, { children: "In je project (of maak een nieuw project aan), open de terminal en voer het volgende uit:" }), "\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: ["Ga vervolgens naar de ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " en installeer Chromium (dat nodig is voor 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: "Configureer Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Vervolgens moet je Jest configureren om naadloos samen te werken met Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Creëer een Jest-configuratiebestand (bijv. ", _jsx(_components.code, { children: "jest.config.js" }), ") in de rootmap van je project, als je er nog geen hebt. In dit configuratiebestand specificeer je jest-puppeteer als een preset:"] }), "\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 configuraties...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Je kunt andere Jest-instellingen in dit bestand aanpassen indien nodig. Voor meer informatie over het aanpassen van Jest-configuraties, raadpleeg de ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "Jest-configuratie" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Schrijf je tests" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Maak testbestanden in je project, meestal genaamd met de ", _jsx(_components.code, { children: ".test.js" }), " extensie. Jest zal deze testbestanden automatisch ontdekken en uitvoeren."] }), "\n", _jsxs(_components.p, { children: ["Hier is een voorbeeld uit de ", _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('zou getiteld moeten zijn \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Voer vervolgens het commando uit om de test te uitvoeren:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Door deze drie stappen te volgen, heb je een goed geconfigureerde testomgeving voor het uitvoeren van end-to-end tests met jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Let op: dit is slechts een basisvoorbeeld. Voor meer gedetailleerde informatie over het configureren van een omgeving, raadpleeg de relevante documentatie:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Aan de slag" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Gebruiken met puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "veel-gebruikte-apis", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#veel-gebruikte-apis", children: _jsx(_components.span, { children: "#" }) }), "Veel gebruikte API's"] }), "\n", _jsx(_components.p, { children: "In de komende stappen zullen we vertrouwen op de API's die worden aangeboden door Jest, Puppeteer en jest-puppeteer om ons bij onze tests te helpen." }), "\n", _jsxs(_components.p, { children: ["Jest biedt primair API's voor het organiseren van tests en het bevestigen van verwachte resultaten. Je kunt de specifieke details in de ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "documentatie" }), " verkennen."] }), "\n", _jsxs(_components.p, { children: ["De API's van Puppeteer zijn primair ontworpen voor interactie met browsers, en hun ondersteuning voor testen is misschien niet zo eenvoudig. Je kunt de ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer documentatie" }), " raadplegen om de functionaliteiten te begrijpen die het biedt. In onze volgende testvoorbeelden zullen we enkele veelvoorkomende gebruiksscenario's behandelen."] }), "\n", _jsxs(_components.p, { children: ["Omdat de API's van Puppeteer oorspronkelijk niet zijn ontworpen voor testen, kan het gebruik ervan voor het schrijven van tests uitdagend zijn. Om het schrijven van Puppeteer-tests te vereenvoudigen, bevat jest-puppeteer een ingebouwde bibliotheek genaamd ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Het biedt een reeks beknopte en gebruiksvriendelijke API's. De bibliotheek wordt gedetailleerd beschreven in zijn ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "documentatie" }), ", die verschillende nuttige functies introduceert, zoals getoond in de onderstaande voorbeelden:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Bevestig dat de huidige pagina 'Tekst op de pagina' bevat\nawait expect(page).toMatchTextContent('Tekst op de pagina');\n\n// Bevestig dat de huidige pagina een div-element bevat met 'Home'\nawait expect(page).toMatchElement('div', { text: 'Home' });\n\n// Bevestig dat een knop met de tekst \"Home\" wordt geklikt\nawait expect(page).toClick('button', { text: 'Home' });\n\n// Bevestig dat een formulier wordt ingevuld\nawait expect(page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "In de volgende voorbeelden zullen we de API's van deze bibliotheken combineren om onze testsituaties te voltooien." }), "\n", _jsx(_components.p, { children: "Nu is het tijd om te beginnen met het leren schrijven van testcode met onze eenvoudige takenlijst-app." }), "\n", _jsxs(_components.h2, { id: "de-eenvoudige-takenlijst-app", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#de-eenvoudige-takenlijst-app", children: _jsx(_components.span, { children: "#" }) }), "De eenvoudige takenlijst-app"] }), "\n", _jsxs(_components.p, { children: ["Stel dat we een eenvoudige takenlijst-app hebben die draait op ", _jsx(_components.code, { children: "http://localhost:3000" }), ", de belangrijkste HTML-code voor deze app is als volgt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Alex's List

\n
Een appel kopen
\n
Voor Kerstmis
\n \n
\n
Lees Logto aan de slag document
\n
\n Doc link:\n Aan de slag \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Bij het uitvoeren van end-to-end testen willen we de volgende scenario's bestrijken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Wanneer we de URL van de app openen, zouden de app en zijn gegevens correct moeten laden." }), "\n", _jsx(_components.li, { children: "De controleknop van het item moet klikbaar zijn." }), "\n", _jsx(_components.li, { children: "Het klikken op een externe link in de itemnotities moet de link in een nieuw tabblad openen." }), "\n", _jsx(_components.li, { children: "Een item via het formulier kunnen toevoegen." }), "\n"] }), "\n", _jsx(_components.p, { children: "Later zullen we testcode schrijven om deze scenario's te valideren." }), "\n", _jsxs(_components.h2, { id: "verwacht-dat-de-app-en-zijn-gegevens-zijn-geladen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwacht-dat-de-app-en-zijn-gegevens-zijn-geladen", children: _jsx(_components.span, { children: "#" }) }), "Verwacht dat de app en zijn gegevens zijn geladen"] }), "\n", _jsx(_components.p, { children: "We beschouwen dat de app succesvol is geladen wanneer aan de volgende voorwaarden is voldaan:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Een element met de ID \"app\" moet op de pagina bestaan na toegang tot de URL van de app." }), "\n", _jsx(_components.li, { children: "De gegevens binnen de app moeten correct worden weergegeven." }), "\n"] }), "\n", _jsx(_components.p, { children: "Dus we hebben de volgende testcode geschreven:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('zou de app succesvol moeten laden', async () => {\n // Ga naar de app pagina\n await page.goto('http://localhost:3000');\n\n // Wacht tot de app is geladen\n await page.waitForSelector('#app');\n\n // Verwacht dat de gegevens zijn geladen\n await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex's List\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "In de code:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " is gelijk aan het invoeren van \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" in de browser, zodat je naar elke URL kunt navigeren."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " wordt gebruikt om te wachten op een specifieke CSS-selector die overeenkomt met een bepaald element, met een standaard wachttijd van 30 seconden."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " is van de ", _jsx(_components.code, { children: "expect-puppeteer" }), " bibliotheek, het is vergelijkbaar met ", _jsx(_components.code, { children: "page.waitForSelector" }), ", maar het ondersteunt ook het matchen van de tekst binnen een element. Bovendien is de standaardtimeout voor ", _jsx(_components.code, { children: "toMatchElement" }), " slechts 500ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Het lijkt op het eerste gezicht perfect, maar wanneer je deze test uitvoert en naar een CI-omgeving inzet, mislukt het af en toe na meerdere uitvoeringen. De foutmelding geeft aan:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Na 500ms wachten kunnen we geen “div” vinden met een klasse naam “title” en die de tekst \"Alex's List\" bevat.\n" }) }), "\n", _jsx(_components.p, { children: "Op basis van de foutinformatie en het feit dat deze test meestal slaagt, kunnen we afleiden dat de gegevens die door de app worden opgevraagd mogelijk niet altijd binnen de eerste 500ms na het laden van de app worden geretourneerd. Daarom willen we wachten tot de gegevens zijn geladen voordat we de bewering uitvoeren." }), "\n", _jsx(_components.p, { children: "Er zijn doorgaans twee veelvoorkomende benaderingen om dit te bereiken:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Verhoog de wachttijd van de bewering" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Uit het foutbericht kunnen we zien dat de standaardwachttijd voor ", _jsx(_components.code, { children: "toMatchElement" }), " is ingesteld op 500ms. We kunnen de wachttijd verhogen door de optie ", _jsx(_components.code, { children: "timeout" }), " aan de functie toe te voegen als volgt:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex's List\",\n timeout: 2000, // Verhoog tot 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Deze benadering kan de kans op mislukte tests enigszins verminderen, maar lost het probleem niet helemaal op, omdat we niet zeker weten hoeveel tijd nodig is om de gegevens op te halen." }), "\n", _jsx(_components.p, { children: "Daarom gebruiken we deze benadering alleen wanneer we zeker zijn van de benodigde wachttijd, zoals in scenario's als \"een tooltip verschijnt na het zweven boven een element gedurende meer dan 2 seconden.”" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Wacht tot het netwerkverzoek is voltooid voordat je een bewering doet" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Dit is de juiste benadering. Hoewel we misschien niet weten hoe lang het dataverzoek zal duren, is wachten op het voltooien van het netwerkverzoek altijd een veilige keuze. Op dit punt kunnen we ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " gebruiken om te wachten tot de netwerkverzoeken zijn voltooid:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('zou de app succesvol moeten laden', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Wacht tot de netwerkverzoeken zijn geëindigd.\n\t * Voeg hier toe om ervoor te zorgen dat zowel de app als de gegevens zijn geladen.\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 List\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "Op deze manier, voordat we de bewering voor de App en zijn geladen gegevens uitvoeren, kunnen we ervoor zorgen dat onze netwerkverzoeken al zijn voltooid. Dit zorgt ervoor dat de test consequent de juiste resultaten oplevert." }), "\n", _jsxs(_components.h2, { id: "verwacht-om-op-een-specifieke-knop-te-klikken", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwacht-om-op-een-specifieke-knop-te-klikken", children: _jsx(_components.span, { children: "#" }) }), "Verwacht om op een specifieke knop te klikken"] }), "\n", _jsx(_components.p, { children: "Vervolgens testen we de functionaliteit van het klikken op de controleknop binnen een item." }), "\n", _jsxs(_components.p, { children: ["In de voorbeeldapp hebben we opgemerkt dat alle items dezelfde structuur hebben. Hun controleknoppen hebben de CSS-selector ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", en de knoptekst is altijd \"Check\". Dit betekent dat we niet direct kunnen specificeren op welke controleknop van het item we willen klikken. We hebben dus een nieuwe oplossing nodig."] }), "\n", _jsx(_components.p, { children: "Stel dat we op de controleknop van het \"Lees Logto aan de slag document\" item willen klikken. We kunnen dit in twee stappen opsplitsen:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Eerst, verkrijg een referentie naar dat specifieke item." }), "\n", _jsx(_components.li, { children: "Klik vervolgens op de controleknop binnen dat item." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('zou in staat moeten zijn om op de controleknop van het lees doc item te klikken', async () => {\n // Verkrijg de lees doc item referentie\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Lees Logto aan de slag document' }\n );\n\n // Verwacht om op de gerelateerde knop te klikken\n await expect(readDocItem).toClick('button', { text: 'Check' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Zoals te zien is in de code, gebruiken we de ", _jsx(_components.code, { children: "toMatchElement" }), " functie om het item te matchen met de ", _jsx(_components.code, { children: "itemName" }), " ingesteld op \"Lees Logto aan de slag document\". Vervolgens gebruiken we de ", _jsx(_components.code, { children: "readDocItem" }), " referentie om te klikken op de knop met de tekstinhoud 'Check' eronder."] }), "\n", _jsxs(_components.p, { children: ["Het is belangrijk op te merken dat bij het verkrijgen van de ", _jsx(_components.code, { children: "readDocItem" }), ", de CSS-selector die wordt gebruikt is ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Deze selector matcht het root ", _jsx(_components.code, { children: "li" }), "-element van het item, niet het ", _jsx(_components.code, { children: "itemName" }), " erin, omdat we van plan zijn om later op de ", _jsx(_components.code, { children: "button" }), " onder de ", _jsx(_components.code, { children: "li" }), "-tag te klikken."] }), "\n", _jsxs(_components.p, { children: ["Het gebruik van ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " is vergelijkbaar met ", _jsx(_components.code, { children: "toMatchElement" }), ". In de voorbeeldcode geven we ", _jsx(_components.code, { children: "{ text: 'Check' }" }), " door om verder de ", _jsx(_components.code, { children: "textContent" }), " van de button te matchen. Je kunt echter beslissen of je de tekstinhoud van de button wilt matchen op basis van je behoeften."] }), "\n", _jsxs(_components.h2, { id: "verwacht-dat-een-externe-link-wordt-geopend-in-een-nieuw-tabblad", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwacht-dat-een-externe-link-wordt-geopend-in-een-nieuw-tabblad", children: _jsx(_components.span, { children: "#" }) }), "Verwacht dat een externe link wordt geopend in een nieuw tabblad"] }), "\n", _jsx(_components.p, { children: "Vervolgens willen we testen of we een externe link in een nieuw tabblad kunnen openen wanneer erop wordt geklikt binnen de itemnotities." }), "\n", _jsx(_components.p, { children: "In de voorbeeldapp hebben we ontdekt dat het \"Lees Logto aan de slag document\" item een externe link naar de Logto-documentatie binnen de notities bevat. Hier is onze testcode:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('zou een externe link in een nieuw tabblad moeten openen', async () => {\n // Beperk tot het specifieke item door de lees doc item referentie te verkrijgen\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Lees Logto aan de slag document' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Aan de slag' });\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 // Vergeet niet om de pagina te sluiten na het testen\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["In de code gebruiken we ", _jsx(_components.code, { children: "toClick" }), " om op de link binnen ", _jsx(_components.code, { children: "itemNotes" }), " te klikken."] }), "\n", _jsxs(_components.p, { children: ["Vervolgens gebruiken we ", _jsx(_components.code, { children: "browser.waitForTarget" }), " om een nieuw geopend tabblad te vangen met de URL \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started", children: "https://docs.logto.io/docs/tutorials/get-started" }), ".\""] }), "\n", _jsxs(_components.p, { children: ["Nadat je het tabblad hebt verkregen, gebruiken we ", _jsx(_components.code, { children: "target.page()" }), " om een instantie van de Logto doc-pagina te krijgen en verder te controleren of de pagina is geladen."] }), "\n", _jsx(_components.p, { children: "Vergeet ook niet om de nieuw geopende pagina te sluiten na het voltooien van onze test." }), "\n", _jsxs(_components.h2, { id: "verwacht-een-item-te-maken-via-het-formulier", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#verwacht-een-item-te-maken-via-het-formulier", children: _jsx(_components.span, { children: "#" }) }), "Verwacht een item te maken via het formulier"] }), "\n", _jsx(_components.p, { children: "Nu willen we de functionaliteit van het toevoegen van een item testen." }), "\n", _jsx(_components.p, { children: "We moeten de itemnaam en itemnotities in het formulier invullen, op de \"Toevoegen\" knop klikken en controleren of de inhoud die we hebben toegevoegd in de lijst verschijnt:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('zou een item uit het formulier moeten maken', async () => {\n // Vul het formulier in en verstuur\n await expect(page).toFill('form input[name=itemName]', 'Contact opnemen met John');\n await expect(page).toFill('form input[name=itemNotes]', 'Stuur een e-mail naar john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Toevoegen' });\n\n // Verwacht dat het item is aangemaakt\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Contact opnemen met John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Je zult merken dat we de ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " functie gebruiken om de inhoud van het formulier in te vullen. Deze functie vervangt alle inhoud in de input door de ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Als je enkele tekens aan de input wilt toevoegen zonder de bestaande inhoud te vervangen, kun je ", _jsx(_components.code, { children: "page.type(selector, content)" }), " gebruiken om de gewenste inhoud direct toe te voegen aan de input."] }), "\n", _jsxs(_components.p, { children: ["Echter, wanneer we veel velden hebben om in ons formulier in te vullen, is het niet handig om ", _jsx(_components.code, { children: "toFill" }), " meerdere keren aan te roepen. In dit geval kunnen we de volgende benadering gebruiken om alle inhoud in één keer in te vullen:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Contact opnemen met John',\n itemNotes: 'Stuur een e-mail naar john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "De verstrekte objectkey is het name-atribuut van het inputelement." }), "\n", _jsxs(_components.h2, { id: "samenvatting", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#samenvatting", children: _jsx(_components.span, { children: "#" }) }), "Samenvatting"] }), "\n", _jsx(_components.p, { children: "We hebben een eenvoudig voorbeeld behandeld om veelvoorkomende testvereisten en bijbehorende technieken voor het schrijven van code te introduceren bij het gebruik van jest-puppeteer voor end-to-end testen. We hopen dat dit je kan helpen om snel de basisprincipes van het schrijven van jest-puppeteer testcode onder de knie te krijgen." }), "\n", _jsx(LogtoCloudButton, { children: "Probeer Logto vandaag nog" })] }); } 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."); }