"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduktion-till-end-to-end-testning-med-jest-puppeteer", "hProperties": { "id": "introduktion-till-end-to-end-testning-med-jest-puppeteer" } }, "depth": 2, "value": "Introduktion till end-to-end testning med jest-puppeteer" }, { "data": { "id": "ställa-in-din-testmiljö", "hProperties": { "id": "ställa-in-din-testmiljö" } }, "depth": 2, "value": "Ställa in din testmiljö" }, { "data": { "id": "vanligt-använda-apier", "hProperties": { "id": "vanligt-använda-apier" } }, "depth": 2, "value": "Vanligt använda API:er" }, { "data": { "id": "den-enkla-att-göra-appen", "hProperties": { "id": "den-enkla-att-göra-appen" } }, "depth": 2, "value": "Den enkla att-göra-appen" }, { "data": { "id": "förvänta-dig-att-appen-och-dess-data-har-laddats", "hProperties": { "id": "förvänta-dig-att-appen-och-dess-data-har-laddats" } }, "depth": 2, "value": "Förvänta dig att appen och dess data har laddats" }, { "data": { "id": "förvänta-dig-att-klicka-på-en-specifik-knapp", "hProperties": { "id": "förvänta-dig-att-klicka-på-en-specifik-knapp" } }, "depth": 2, "value": "Förvänta dig att klicka på en specifik knapp" }, { "data": { "id": "förvänta-dig-att-en-extern-länk-öppnas-i-en-ny-flik", "hProperties": { "id": "förvänta-dig-att-en-extern-länk-öppnas-i-en-ny-flik" } }, "depth": 2, "value": "Förvänta dig att en extern länk öppnas i en ny flik" }, { "data": { "id": "förvänta-dig-att-skapa-ett-objekt-från-formuläret", "hProperties": { "id": "förvänta-dig-att-skapa-ett-objekt-från-formuläret" } }, "depth": 2, "value": "Förvänta dig att skapa ett objekt från formuläret" }, { "data": { "id": "sammanfattning", "hProperties": { "id": "sammanfattning" } }, "depth": 2, "value": "Sammanfattning" }]; const readingTime = { "minutes": 7, "words": 2206, "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: "Som en del av vårt engagemang för att säkerställa kvaliteten på Logto och kontinuerlig förbättring, använder vi jest-puppeteer för end-to-end automatiserad testning. Detta gör att vi snabbt kan iterera på Logtos utveckling utan störningar." }), "\n", _jsx(_components.p, { children: "I denna artikel delar vi med oss av vår erfarenhet av att skriva effektiva jest-puppeteer testskript med en enkel att-göra-app som exempel. Vårt mål är att hjälpa dig att snabbt komma igång med att skriva jest-puppeteer testkod för dina egna projekt." }), "\n", _jsxs(_components.h2, { id: "introduktion-till-end-to-end-testning-med-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduktion-till-end-to-end-testning-med-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Introduktion till end-to-end testning med jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["End-to-end testning är ett sätt att säkerställa att din applikation fungerar korrekt ur användarens perspektiv. För att uppnå detta använder vi två viktiga verktyg: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " och ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " är ett populärt JavaScript testningsramverk som erbjuder ett användarvänligt API för att skriva tester och assertioner. Det används flitigt för enhets- och integrationstestning."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " är ett Node.js-bibliotek utvecklat av Chrome-teamet som tillhandahåller ett hög nivå API för att kontrollera headless Chrome eller Chromium webbläsare. Detta gör det till ett idealiskt val för att automatisera webbläsarinteraktioner i end-to-end tester."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " är ett Jest-presett som möjliggör end-to-end testning med Puppeteer. Det erbjuder ett enkelt API för att starta nya webbläsarinstanser och interagera med webbsidor genom dem."] }), "\n", _jsx(_components.p, { children: "Nu när du har en grundläggande förståelse av de viktiga verktygen, låt oss dyka in i att ställa in din testmiljö." }), "\n", _jsxs(_components.h2, { id: "ställa-in-din-testmiljö", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#ställa-in-din-testmiljö", children: _jsx(_components.span, { children: "#" }) }), "Ställa in din testmiljö"] }), "\n", _jsx(_components.p, { children: "Att ställa in din testmiljö för end-to-end testning med jest-puppeteer är en enkel process som innefattar tre huvudsteg:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Installera beroenden" }), "\n"] }), "\n", _jsx(_components.p, { children: "I ditt projekt (eller skapa ett nytt projekt), öppna terminalen och kör:" }), "\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: ["Gå sedan till ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " och installera Chromium (som behövs för 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: "Konfigurera Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Nästa steg är att konfigurera Jest för att fungera sömlöst med Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Skapa en Jest-konfigurationsfil (t.ex., ", _jsx(_components.code, { children: "jest.config.js" }), ") i ditt projekts rotkatalog om du inte redan har en. I den här konfigurationsfilen anger du jest-puppeteer som ett preset:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Andra Jest-konfigurationer...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Du kan anpassa andra Jest-inställningar i denna fil efter behov. För mer information om hur du anpassar Jest-konfigurationer, vänligen hänvisa till ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "Jest-konfiguration" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Skriv dina tester" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Skapa testfiler i ditt projekt, vanligtvis namngivna med ", _jsx(_components.code, { children: ".test.js" }), "-ändelsen. Jest kommer automatiskt upptäcka och köra dessa testfiler."] }), "\n", _jsxs(_components.p, { children: ["Här är ett exempel från ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest-dokumentationen" }), ":"] }), "\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('ska ha titeln \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Kör sedan kommandot för att köra testet:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Genom att följa dessa tre steg kommer du att ha en välkonfigurerad testmiljö för att genomföra end-to-end tester med jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Observera dock att detta bara är ett grundläggande exempel. För mer detaljerad information om miljökonfiguration, vänligen hänvisa till relevant dokumentation:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Komma igång" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Användning med puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "vanligt-använda-apier", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#vanligt-använda-apier", children: _jsx(_components.span, { children: "#" }) }), "Vanligt använda API:er"] }), "\n", _jsx(_components.p, { children: "I de kommande stegen kommer vi att förlita oss på API:er som tillhandahålls av Jest, Puppeteer och jest-puppeteer för att hjälpa oss i våra tester." }), "\n", _jsxs(_components.p, { children: ["Jest erbjuder huvudsakligen API:er för att organisera tester och hävda förväntade resultat. Du kan utforska de specifika detaljerna i ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "dokumentationen" }), "."] }), "\n", _jsxs(_components.p, { children: ["Puppeteers API:er är främst utformade för att interagera med webbläsare, och deras stöd för testning är kanske inte lika enkelt. Du kan hänvisa till ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer-dokumentationen" }), " för att förstå de funktioner den tillhandahåller. I våra efterföljande testexempel kommer vi att täcka några vanliga användningsfall."] }), "\n", _jsxs(_components.p, { children: ["Eftersom Puppeteers API:er inte ursprungligen utformades för testning kan det vara utmanande att använda dem för att skriva tester. För att förenkla processen att skriva Puppeteer-tester innehåller jest-puppeteer ett inbäddat bibliotek kallat ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Det erbjuder en uppsättning korta och användarvänliga API:er. Biblioteket beskrivs i sin ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "dokumentation" }), ", som introducerar olika nyttiga funktioner, som visas i exemplen nedan:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Hävdar att den aktuella sidan innehåller 'Text in the page'\nawait expect(page).toMatchTextContent('Text in the page');\n\n// Hävdar att den aktuella sidan har ett div-element som innehåller 'Home'\nawait expect(page).toMatchElement('div', { text: 'Home' });\n\n// Hävdar att en knapp som innehåller texten \"Home\" kommer att klickas\nawait expect(page).toClick('button', { text: 'Home' });\n\n// Hävdar att ett formulär kommer att fyllas i\nawait expect(page).toFillForm('form[name=\"myForm\"]', {\n firstName: 'James',\n lastName: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "I följande exempel kommer vi att kombinera de API:er som tillhandahålls av dessa bibliotek för att slutföra våra testscenarion." }), "\n", _jsx(_components.p, { children: "Nu är det dags att börja lära sig hur man skriver testkod med hjälp av vår enkla att-göra-app." }), "\n", _jsxs(_components.h2, { id: "den-enkla-att-göra-appen", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#den-enkla-att-göra-appen", children: _jsx(_components.span, { children: "#" }) }), "Den enkla att-göra-appen"] }), "\n", _jsxs(_components.p, { children: ["Anta att vi har en enkel att-göra-app som körs på ", _jsx(_components.code, { children: "http://localhost:3000" }), ", den huvudsakliga HTML-koden för denna app är som följer:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Alex's List

\n
Köpa ett äpple
\n
För julen
\n \n
\n
Läsa Logto kom igång-dokumentet
\n
\n Doc länk:\n Kom igång \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "När vi utför end-to-end-testning strävar vi efter att täcka följande scenarier:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "När vi öppnar appens URL ska appen och dess data laddas korrekt." }), "\n", _jsx(_components.li, { children: "Kontrollknappen i objektet ska gå att klicka på." }), "\n", _jsx(_components.li, { children: "Klicka på en extern länk inuti objektanteckningarna ska öppna länken i en ny flik." }), "\n", _jsx(_components.li, { children: "Kan lägga till ett objekt från formuläret." }), "\n"] }), "\n", _jsx(_components.p, { children: "Senare kommer vi att skriva testkod för att validera dessa scenarier." }), "\n", _jsxs(_components.h2, { id: "förvänta-dig-att-appen-och-dess-data-har-laddats", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förvänta-dig-att-appen-och-dess-data-har-laddats", children: _jsx(_components.span, { children: "#" }) }), "Förvänta dig att appen och dess data har laddats"] }), "\n", _jsx(_components.p, { children: "Vi anser att appen har laddats framgångsrikt när följande villkor är uppfyllda:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Ett element med ID:t \"app\" bör finnas på sidan efter att man har öppnat appens URL." }), "\n", _jsx(_components.li, { children: "Datat inuti appen bör vara korrekt renderad." }), "\n"] }), "\n", _jsx(_components.p, { children: "Så vi har skrivit följande testkod:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('ska ladda appen framgångsrikt', async () => {\n // Gå till appens sida\n await page.goto('http://localhost:3000');\n\n // Vänta på att appen ska laddas\n await page.waitForSelector('#app');\n\n // Förvänta att datan är laddad\n await expect(page).toMatchElement('div[class=title]', {\n text: \"Alex's List\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "I koden:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " är motsvarande att skriva \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" i webbläsaren, så att du kan navigera till vilken URL som helst."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " används för att vänta på att en specifik CSS-selektor ska matcha ett visst element, med en default väntetid på 30 sekunder."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " kommer från ", _jsx(_components.code, { children: "expect-puppeteer" }), " lib, Det är liknande ", _jsx(_components.code, { children: "page.waitForSelector" }), ", men det stöder också att matcha texten inom ett element. Dessutom är standardtimeouten för ", _jsx(_components.code, { children: "toMatchElement" }), " endast 500 ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Det kan verka perfekt vid första anblicken, men när vi kör detta test och distribuerar det till en CI-miljö misslyckas det ibland efter flera körningar. Felmeddelandet indikerar:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Efter att ha väntat i 500 ms kan vi inte hitta en \"div\" med klassnamnet \"title\" och som innehåller texten \"Alex's List\".\n" }) }), "\n", _jsx(_components.p, { children: "Baserat på felinformationen och det faktum att detta test passerar oftast, kan vi dra slutsatsen att datan som begärs av appen kanske inte alltid returneras inom de första 500 ms efter att appen laddas. Därför vill vi vänta på att datan ska laddas innan vi gör påståendet." }), "\n", _jsx(_components.p, { children: "Vanligtvis finns det två vanliga metoder för att uppnå detta:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Öka assertions väntetid" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Från felmeddelandet kan vi se att standardväntetiden för ", _jsx(_components.code, { children: "toMatchElement" }), " är inställd på 500 ms. Vi kan öka väntetiden genom att lägga till ", _jsx(_components.code, { children: "timeout" }), "-alternativet till funktionen på detta sätt:"] }), "\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, // Öka till 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Den här metoden kan minska förekomsten av misslyckade tester till viss del, men den löser inte helt problemet eftersom vi inte kan veta säkert hur mycket tid som behövs för att datan ska hämtas." }), "\n", _jsx(_components.p, { children: "Därför använder vi bara denna metod när vi är säkra på den nödvändiga väntetiden, som i scenarion som \"en tooltip visas efter att ha svävat över ett element i mer än 2 sekunder.”" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Vänta på att nätverksförfrågan ska slutföras innan du gör en assertion" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Detta är rätt metod. Även om vi kanske inte vet hur länge datan kommer att ta, är det alltid ett säkert val att vänta på att nätverksförfrågan ska avslutas. Vid denna punkt kan vi använda ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " för att vänta på att nätverksförfrågningarna ska slutföras:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('ska ladda appen framgångsrikt', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/\n\t * Vänta på att nätverksförfrågningar avslutas.\n\t * Lägg till här för att säkerställa att både appen och datan har laddats.\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: "På detta sätt kan vi innan vi utför påståendet för Appen och dess laddade data säkerställa att våra nätverksförfrågningar redan har avslutats. Detta säkerställer att testet konsekvent ger rätt resultat." }), "\n", _jsxs(_components.h2, { id: "förvänta-dig-att-klicka-på-en-specifik-knapp", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förvänta-dig-att-klicka-på-en-specifik-knapp", children: _jsx(_components.span, { children: "#" }) }), "Förvänta dig att klicka på en specifik knapp"] }), "\n", _jsx(_components.p, { children: "Nästa test är att se om det går att klicka på check-knappen inuti ett objekt." }), "\n", _jsxs(_components.p, { children: ["I exempelappen har vi märkt att alla objekt delar samma struktur. Deras check-knappar har CSS-selectorn ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", och knappens text är alltid \"Check\". Detta innebär att vi inte direkt kan specificera vilken items check-knapp vi ska klicka på. Därför behöver vi en ny lösning."] }), "\n", _jsx(_components.p, { children: "Anta att vi vill klicka på check-knappen för \"Läsa Logto kom igång-dokumentet\" objektet. Vi kan dela upp detta i två steg:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Först få en referens till det specifika objektet." }), "\n", _jsx(_components.li, { children: "Sedan klicka på check-knappen inuti det objektet." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('ska kunna klicka på check-knappen för läsningsdokumentet', async () => {\n // Få referensen till läsningsdokumentet\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Läsa Logto kom igång-dokumentet' }\n );\n\n // Förvänta dig att klicka på relaterad knapp\n await expect(readDocItem).toClick('button', { text: 'Check' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Som visas i koden använder vi funktionen ", _jsx(_components.code, { children: "toMatchElement" }), " för att matcha objektet med ", _jsx(_components.code, { children: "itemName" }), " inställt på \"Läsa Logto kom igång-dokumentet\". Sedan använder vi referensen ", _jsx(_components.code, { children: "readDocItem" }), " för att klicka på knappen med textinnehållet 'Check' som finns under den."] }), "\n", _jsxs(_components.p, { children: ["Det är viktigt att notera att när vi får ", _jsx(_components.code, { children: "readDocItem" }), ", är CSS-selectorn som används ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Denna selektor matchar rot ", _jsx(_components.code, { children: "li" }), " elementet i objektet, inte ", _jsx(_components.code, { children: "itemName" }), " inuti det, eftersom vi har för avsikt att klicka på ", _jsx(_components.code, { children: "button" }), " under ", _jsx(_components.code, { children: "li" }), " taggen senare."] }), "\n", _jsxs(_components.p, { children: ["Användningen av ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " är liknande ", _jsx(_components.code, { children: "toMatchElement" }), ". I exempel-koden skickar vi ", _jsx(_components.code, { children: "{ text: 'Check' }" }), " för att ytterligare matcha ", _jsx(_components.code, { children: "textContent" }), " av knappen. Dock kan du välja om du vill matcha textinnehållet i knappen baserat på dina behov."] }), "\n", _jsxs(_components.h2, { id: "förvänta-dig-att-en-extern-länk-öppnas-i-en-ny-flik", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förvänta-dig-att-en-extern-länk-öppnas-i-en-ny-flik", children: _jsx(_components.span, { children: "#" }) }), "Förvänta dig att en extern länk öppnas i en ny flik"] }), "\n", _jsx(_components.p, { children: "Nästa test är att se om det går att öppna en extern länk i en ny flik när man klickar på den inom anteckningarna." }), "\n", _jsx(_components.p, { children: "I exempelappen har vi funnit att \"Läsa Logto kom igång-dokumentet\" objektet har en extern länk till Logto-dokumentet inom sina anteckningar. Här är vår testkod:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('ska öppna en extern länk i en ny flik', async () => {\n // Begränsa till det specifika objektet genom att få referensen till läsningsdokumentet\n const readDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Läsa Logto kom igång-dokumentet' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Kom Igång' });\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 // Kom ihåg att stänga sidan efter testningen\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["I koden utnyttjar vi ", _jsx(_components.code, { children: "toClick" }), " för att klicka på länken inom ", _jsx(_components.code, { children: "itemNotes" }), "."] }), "\n", _jsxs(_components.p, { children: ["Därefter använder vi ", _jsx(_components.code, { children: "browser.waitForTarget" }), " för att fånga en nyligen öppnad flik med URL:en \"", _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: ["Efter att ha erhållit fliken använder vi ", _jsx(_components.code, { children: "target.page()" }), " för att få en instans av Logto-dokumentets sida och kontrollera ytterligare om sidan har laddats."] }), "\n", _jsx(_components.p, { children: "Kom också ihåg att stänga den nyöppnade sidan efter att testet har slutförts." }), "\n", _jsxs(_components.h2, { id: "förvänta-dig-att-skapa-ett-objekt-från-formuläret", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#förvänta-dig-att-skapa-ett-objekt-från-formuläret", children: _jsx(_components.span, { children: "#" }) }), "Förvänta dig att skapa ett objekt från formuläret"] }), "\n", _jsx(_components.p, { children: "Nu vill vi testa funktionen att lägga till ett objekt." }), "\n", _jsx(_components.p, { children: "Vi behöver fylla i objektets namn och anteckningar i formuläret, klicka på \"Add\"-knappen och kontrollera om innehållet vi lagt till visas i listan:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('ska skapa ett objekt från formuläret', async () => {\n // Fyll i formuläret och skicka in\n await expect(page).toFill('form input[name=itemName]', 'Kontakta John');\n await expect(page).toFill('form input[name=itemNotes]', 'Skicka ett e-postmeddelande till john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Add' });\n\n // Förvänta dig att objektet har skapats\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Kontakta John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Du kommer att märka att vi använder funktionen ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " för att fylla i formulärinnehållet. Denna funktion ersätter allt innehåll i inmatningen med ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Om du vill lägga till några tecken till inmatningen utan att ersätta det befintliga innehållet kan du använda ", _jsx(_components.code, { children: "page.type(selector, content)" }), " för att direkt lägga till önskat innehåll till inmatningen."] }), "\n", _jsxs(_components.p, { children: ["Men när vi har många fält att fylla i vår form är det inte bekvämt att kalla ", _jsx(_components.code, { children: "toFill" }), " flera gånger. I detta fall kan vi använda följande metod för att fylla i allt innehåll i en kallelse:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Kontakta John',\n itemNotes: 'Skicka ett e-postmeddelande till john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Det angivna objektnyckeln är name-attributet för input-elementet." }), "\n", _jsxs(_components.h2, { id: "sammanfattning", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#sammanfattning", children: _jsx(_components.span, { children: "#" }) }), "Sammanfattning"] }), "\n", _jsx(_components.p, { children: "Vi har täckt ett enkelt exempel för att introducera vanliga testkrav och motsvarande kodskrivningstekniker vid användning av jest-puppeteer för end-to-end testning. Vi hoppas att det kan hjälpa dig snabbt greppa grunderna för att skriva jest-puppeteer testkod." }), "\n", _jsx(LogtoCloudButton, { children: "Prova Logto idag" })] }); } 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."); }