"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introduction-aux-tests-de-bout-en-bout-avec-jest-puppeteer", "hProperties": { "id": "introduction-aux-tests-de-bout-en-bout-avec-jest-puppeteer" } }, "depth": 2, "value": "Introduction aux tests de bout en bout avec jest-puppeteer" }, { "data": { "id": "configuration-de-votre-environnement-de-test", "hProperties": { "id": "configuration-de-votre-environnement-de-test" } }, "depth": 2, "value": "Configuration de votre environnement de test" }, { "data": { "id": "api-couramment-utilisées", "hProperties": { "id": "api-couramment-utilisées" } }, "depth": 2, "value": "API couramment utilisées" }, { "data": { "id": "lapplication-simple-de-tâches-à-faire", "hProperties": { "id": "lapplication-simple-de-tâches-à-faire" } }, "depth": 2, "value": "L'application simple de tâches à faire" }, { "data": { "id": "attendre-que-lapplication-et-ses-données-soient-chargées", "hProperties": { "id": "attendre-que-lapplication-et-ses-données-soient-chargées" } }, "depth": 2, "value": "Attendre que l'application et ses données soient chargées" }, { "data": { "id": "attendre-pour-cliquer-sur-un-bouton-spécifique", "hProperties": { "id": "attendre-pour-cliquer-sur-un-bouton-spécifique" } }, "depth": 2, "value": "Attendre pour cliquer sur un bouton spécifique" }, { "data": { "id": "attendre-quun-lien-externe-soit-ouvert-dans-un-nouvel-onglet", "hProperties": { "id": "attendre-quun-lien-externe-soit-ouvert-dans-un-nouvel-onglet" } }, "depth": 2, "value": "Attendre qu'un lien externe soit ouvert dans un nouvel onglet" }, { "data": { "id": "attendre-pour-créer-un-élément-à-partir-du-formulaire", "hProperties": { "id": "attendre-pour-créer-un-élément-à-partir-du-formulaire" } }, "depth": 2, "value": "Attendre pour créer un élément à partir du formulaire" }, { "data": { "id": "résumé", "hProperties": { "id": "résumé" } }, "depth": 2, "value": "Résumé" }]; const readingTime = { "minutes": 9, "words": 2557, "text": "9 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: "Dans le cadre de notre engagement à assurer la qualité de Logto et l'amélioration continue, nous utilisons jest-puppeteer pour les tests automatisés de bout en bout. Cela nous permet d'itérer rapidement sur le développement de Logto sans interruptions." }), "\n", _jsx(_components.p, { children: "Dans cet article, nous partagerons notre expérience de l'écriture de scripts de test jest-puppeteer efficaces en utilisant une simple application de tâches à faire comme exemple. Notre objectif est de vous aider à commencer rapidement à écrire du code de test jest-puppeteer pour vos propres projets." }), "\n", _jsxs(_components.h2, { id: "introduction-aux-tests-de-bout-en-bout-avec-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introduction-aux-tests-de-bout-en-bout-avec-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Introduction aux tests de bout en bout avec jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["Les tests de bout en bout sont un moyen de s'assurer que votre application fonctionne correctement du point de vue de l'utilisateur. Pour y parvenir, nous utilisons deux outils essentiels : ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " et ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " est un cadre de test JavaScript populaire qui offre une API conviviale pour écrire des tests et des assertions. Il est largement utilisé pour les tests unitaires et d'intégration."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " est une bibliothèque Node.js développée par l'équipe Chrome qui fournit une API de haut niveau pour contrôler les navigateurs Chrome ou Chromium sans tête. Cela en fait un choix idéal pour automatiser les interactions du navigateur dans les tests de bout en bout."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " est un pré-réglage de Jest qui permet les tests de bout en bout avec Puppeteer. Il propose une API simple pour lancer de nouvelles instances de navigateur et interagir avec les pages Web à travers celles-ci."] }), "\n", _jsx(_components.p, { children: "Maintenant que vous avez une compréhension de base des outils essentiels, plongeons dans la configuration de votre environnement de test." }), "\n", _jsxs(_components.h2, { id: "configuration-de-votre-environnement-de-test", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configuration-de-votre-environnement-de-test", children: _jsx(_components.span, { children: "#" }) }), "Configuration de votre environnement de test"] }), "\n", _jsx(_components.p, { children: "La configuration de votre environnement de test pour les tests de bout en bout avec jest-puppeteer est un processus simple qui implique trois étapes principales:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Installer les dépendances" }), "\n"] }), "\n", _jsx(_components.p, { children: "Dans votre projet (ou créer un nouveau projet), ouvrez le terminal et exécutez :" }), "\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: ["Puis allez dans le ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " et installez Chromium (qui est nécessaire pour 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: "Configurer Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Ensuite, vous devez configurer Jest pour qu'il fonctionne parfaitement avec Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Créez un fichier de configuration Jest (par exemple, ", _jsx(_components.code, { children: "jest.config.js" }), ") dans le répertoire racine de votre projet si vous n'en avez pas déjà un. Dans ce fichier de configuration, spécifiez jest-puppeteer comme pré-réglage :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Other Jest configurations...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Vous pouvez personnaliser d'autres paramètres Jest dans ce fichier selon vos besoins. Pour plus d'informations sur la personnalisation des configurations Jest, veuillez vous référer à la ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "configuration Jest" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Écrire vos tests" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Créez des fichiers de test dans votre projet, généralement nommés avec l'extension ", _jsx(_components.code, { children: ".test.js" }), ". Jest découvrira et exécutera automatiquement ces fichiers de test."] }), "\n", _jsxs(_components.p, { children: ["Voici un exemple tiré de la ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Documentation de Jest" }), ":"] }), "\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('doit être titré \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Exécutez ensuite la commande pour lancer le test :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "En suivant ces trois étapes, vous aurez un environnement de test bien configuré pour effectuer des tests de bout en bout utilisant jest-puppeteer." }), "\n", _jsx(_components.p, { children: "Cependant, veuillez noter que ceci n'est qu'un exemple de base. Pour plus d'informations détaillées sur la configuration de l'environnement, veuillez vous référer à la documentation pertinente :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest : Commencer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest : Utilisation avec puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "api-couramment-utilisées", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#api-couramment-utilisées", children: _jsx(_components.span, { children: "#" }) }), "API couramment utilisées"] }), "\n", _jsx(_components.p, { children: "Dans les étapes à venir, nous nous appuierons sur les API fournies par Jest, Puppeteer, et jest-puppeteer pour nous aider dans nos tests." }), "\n", _jsxs(_components.p, { children: ["Jest offre principalement des API pour organiser les tests et affirmer les résultats attendus. Vous pouvez explorer les détails spécifiques dans la ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "documentation" }), "."] }), "\n", _jsxs(_components.p, { children: ["Les API de Puppeteer sont principalement conçues pour interagir avec les navigateurs, et leur support pour les tests peut ne pas être aussi direct. Vous pouvez vous référer à la ", _jsx(_components.a, { href: "https://pptr.dev/", children: "documentation de Puppeteer" }), " pour comprendre les fonctionnalités qu'il fournit. Dans nos exemples de tests ultérieurs, nous couvrirons quelques cas d'utilisation courants."] }), "\n", _jsxs(_components.p, { children: ["Comme les API de Puppeteer n'ont pas été conçues à l'origine pour les tests, les utiliser pour écrire des tests peut être un défi. Pour simplifier le processus d'écriture des tests Puppeteer, jest-puppeteer inclut une bibliothèque intégrée appelée ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Il offre un ensemble d'API concises et conviviales. La bibliothèque est détaillée dans sa ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "documentation" }), ", qui introduit diverses fonctionnalités utiles, comme le montrent les exemples ci-dessous :"] }), "\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: "Dans les exemples suivants, nous allons combiner les API fournies par ces bibliothèques pour compléter nos scénarios de test." }), "\n", _jsx(_components.p, { children: "Il est maintenant temps de commencer à apprendre à écrire du code de test en utilisant notre simple application de tâches à faire." }), "\n", _jsxs(_components.h2, { id: "lapplication-simple-de-tâches-à-faire", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#lapplication-simple-de-tâches-à-faire", children: _jsx(_components.span, { children: "#" }) }), "L'application simple de tâches à faire"] }), "\n", _jsxs(_components.p, { children: ["En supposant que nous ayons une simple application de tâches à faire fonctionnant à ", _jsx(_components.code, { children: "http://localhost:3000" }), ", le code HTML principal de cette application est le suivant :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

La liste d'Alex

\n
Acheter une pomme
\n
Pour Noël
\n \n
\n
Lire le document débutant de Logto
\n
\n Lien du doc :\n Commencer \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Lors de la réalisation de tests de bout en bout, nous visons à couvrir les scénarios suivants :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Lorsque nous accédons à l'URL de l'application, l'application et ses données doivent se charger correctement." }), "\n", _jsx(_components.li, { children: "Le bouton de vérification de l'article doit être capable de cliquer." }), "\n", _jsx(_components.li, { children: "Cliquer sur un lien externe à l'intérieur des notes de l'article doit ouvrir le lien dans un nouvel onglet." }), "\n", _jsx(_components.li, { children: "Peut ajouter un article à partir du formulaire." }), "\n"] }), "\n", _jsx(_components.p, { children: "Plus tard, nous écrirons du code de test pour valider ces scénarios." }), "\n", _jsxs(_components.h2, { id: "attendre-que-lapplication-et-ses-données-soient-chargées", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#attendre-que-lapplication-et-ses-données-soient-chargées", children: _jsx(_components.span, { children: "#" }) }), "Attendre que l'application et ses données soient chargées"] }), "\n", _jsx(_components.p, { children: "Nous considérons que l'application a réussi à charger lorsque les conditions suivantes sont remplies :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Un élément avec l'ID \"app\" doit exister sur la page après avoir accédé à l'URL de l'application." }), "\n", _jsx(_components.li, { children: "Les données à l'intérieur de l'application doivent être rendues correctement." }), "\n"] }), "\n", _jsx(_components.p, { children: "Donc, nous avons écrit le code de test suivant :" }), "\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: \"La liste d'Alex\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Dans le code :" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " est équivalent à entrer \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" dans le navigateur, ce qui vous permet de naviguer vers n'importe quelle URL."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " est utilisé pour attendre qu'un sélecteur CSS spécifique corresponde à un élément particulier, avec un temps d'attente par défaut de 30 secondes."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " provient de la lib ", _jsx(_components.code, { children: "expect-puppeteer" }), ", Il est similaire à ", _jsx(_components.code, { children: "page.waitForSelector" }), ", mais il supporte également la correspondance du texte à l'intérieur d'un élément. De plus, le délai d'attente par défaut pour ", _jsx(_components.code, { children: "toMatchElement" }), " n'est que de 500ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Cela peut sembler parfait au premier abord, mais lors de l'exécution de ce test et de son déploiement dans un environnement CI, il échoue occasionnellement après plusieurs exécutions. Le message d'échec indique :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Après une attente de 500ms, nous ne pouvons pas trouver un “div” avec un nom de classe de “title” et contenant le texte \"La liste d'Alex\".\n" }) }), "\n", _jsx(_components.p, { children: "Sur la base de l'information d'échec et du fait que ce test réussit la plupart du temps, nous pouvons en déduire que les données demandées par l'application peuvent ne pas toujours revenir dans les 500ms suivant le chargement de l'application. Par conséquent, nous voulons attendre que les données soient chargées avant de faire l'assertion." }), "\n", _jsx(_components.p, { children: "Il y a typiquement deux approches courantes pour y parvenir :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Augmenter le temps d'attente de l'assertion" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["À partir du message d'erreur, nous pouvons voir que le temps d'attente par défaut pour ", _jsx(_components.code, { children: "toMatchElement" }), " est fixé à 500ms. Nous pouvons augmenter le temps d'attente en ajoutant l'option ", _jsx(_components.code, { children: "timeout" }), " à la fonction de cette manière :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"La liste d'Alex\",\n timeout: 2000, // Augmenter à 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Cette approche peut réduire l'occurrence des tests ratés dans une certaine mesure, mais elle ne résout pas complètement le problème car nous ne pouvons pas savoir combien de temps est nécessaire pour que les données soient récupérées." }), "\n", _jsx(_components.p, { children: "C'est pourquoi nous utilisons cette approche uniquement lorsque nous sommes certains du temps d'attente requis, comme dans des scénarios du type \"une info-bulle apparaît après avoir survolé un élément pendant plus de 2 secondes.”" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Attendre la fin de la requête réseau avant de faire une assertion" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["C'est l'approche correcte. Bien que nous ne sachions peut-être pas combien de temps la demande de données prendra, attendre la fin de la demande réseau est toujours un choix sûr. À ce stade, nous pouvons utiliser ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " pour attendre la fin des requêtes réseau :"] }), "\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 * Wait for network requests ended.\n\t * Add here to ensure both the app and the data have been loaded.\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: \"La liste d'Alex\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "De cette façon, avant d'exécuter l'assertion pour l'Application et ses données chargées, nous pouvons nous assurer que nos requêtes réseau ont déjà été conclues. Cela assure que le test produit constamment les bons résultats." }), "\n", _jsxs(_components.h2, { id: "attendre-pour-cliquer-sur-un-bouton-spécifique", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#attendre-pour-cliquer-sur-un-bouton-spécifique", children: _jsx(_components.span, { children: "#" }) }), "Attendre pour cliquer sur un bouton spécifique"] }), "\n", _jsx(_components.p, { children: "Ensuite, nous testons la fonctionnalité de cliquer sur le bouton de vérification à l'intérieur d'un élément." }), "\n", _jsxs(_components.p, { children: ["Dans l'application exemple, nous avons remarqué que tous les éléments partagent la même structure. Leurs boutons de vérification ont le sélecteur CSS ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", et le texte du bouton est toujours \"Vérifier\". Cela signifie que nous ne pouvons pas spécifier directement quel bouton de vérification de l'élément à cliquer. Par conséquent, nous avons besoin d'une nouvelle solution."] }), "\n", _jsx(_components.p, { children: "Supposons que nous voulions cliquer sur le bouton de vérification de l'élément \"Lire le document de démarrage de Logto\". Nous pouvons décomposer cela en deux étapes :" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "D'abord, obtenir une référence à cet élément spécifique." }), "\n", _jsx(_components.li, { children: "Ensuite, cliquer sur le bouton de vérification situé à l'intérieur de cet élément." }), "\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: 'Lire le document de démarrage de Logto' }\n );\n\n // Expect to click the related button\n await expect(readDocItem).toClick('button', { text: 'Vérifier' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Comme indiqué dans le code, nous utilisons la fonction ", _jsx(_components.code, { children: "toMatchElement" }), " pour faire correspondre l'élément avec l'", _jsx(_components.code, { children: "itemName" }), " défini sur \"Lire le document de démarrage de Logto\". Ensuite, nous utilisons la référence ", _jsx(_components.code, { children: "readDocItem" }), " pour cliquer sur le bouton avec le contenu du texte 'Vérifier' situé en dessous de celle-ci."] }), "\n", _jsxs(_components.p, { children: ["Il est important de noter que lors de l'obtention de la ", _jsx(_components.code, { children: "readDocItem" }), ", le sélecteur CSS utilisé est ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Ce sélecteur correspond à l'élément ", _jsx(_components.code, { children: "li" }), " racine de l'élément, et non à l'", _jsx(_components.code, { children: "itemName" }), " à l'intérieur de celui-ci, car nous avons l'intention de cliquer sur le ", _jsx(_components.code, { children: "button" }), " sous l'étiquette ", _jsx(_components.code, { children: "li" }), " ultérieurement."] }), "\n", _jsxs(_components.p, { children: ["L'utilisation de ", _jsx(_components.code, { children: "expect(readDocItem).toClick" }), " est similaire à ", _jsx(_components.code, { children: "toMatchElement" }), ". Dans le code d'exemple, nous passons ", _jsx(_components.code, { children: "{ text: 'Check' }" }), " pour faire correspondre davantage le ", _jsx(_components.code, { children: "textContent" }), " du bouton. Cependant, vous pouvez choisir de faire correspondre ou non le contenu du texte du bouton en fonction de vos besoins."] }), "\n", _jsxs(_components.h2, { id: "attendre-quun-lien-externe-soit-ouvert-dans-un-nouvel-onglet", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#attendre-quun-lien-externe-soit-ouvert-dans-un-nouvel-onglet", children: _jsx(_components.span, { children: "#" }) }), "Attendre qu'un lien externe soit ouvert dans un nouvel onglet"] }), "\n", _jsx(_components.p, { children: "Ensuite, nous voulons tester si nous pouvons ouvrir un lien externe dans un nouvel onglet en cliquant dessus dans les notes de l'élément." }), "\n", _jsx(_components.p, { children: "Dans l'application exemple, nous avons trouvé que l'élément \"Lire le document de démarrage de Logto\" a un lien externe vers le doc Logto dans ses notes. Voici notre code de test :" }), "\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: 'Lire le document de démarrage de Logto' }\n );\n\n await expect(readDocItem).toClick('div[class=itemNotes] a', { text: 'Commencer' });\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: ["Dans le code, nous utilisons ", _jsx(_components.code, { children: "toClick" }), " pour cliquer sur le lien à l'intérieur de ", _jsx(_components.code, { children: "itemNotes" }), "."] }), "\n", _jsxs(_components.p, { children: ["Par la suite, nous utilisons ", _jsx(_components.code, { children: "browser.waitForTarget" }), " pour capturer un nouvel onglet ouvert avec l'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: ["Après avoir obtenu l'onglet, nous utilisons ", _jsx(_components.code, { children: "target.page()" }), " pour obtenir une instance de la page du doc Logto et vérifier davantage si la page a été chargée."] }), "\n", _jsx(_components.p, { children: "N'oubliez pas également de fermer la nouvelle page ouverte après avoir terminé notre test." }), "\n", _jsxs(_components.h2, { id: "attendre-pour-créer-un-élément-à-partir-du-formulaire", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#attendre-pour-créer-un-élément-à-partir-du-formulaire", children: _jsx(_components.span, { children: "#" }) }), "Attendre pour créer un élément à partir du formulaire"] }), "\n", _jsx(_components.p, { children: "Maintenant, nous voulons tester la fonctionnalité d'ajout d'un élément." }), "\n", _jsx(_components.p, { children: "Nous devons remplir le nom de l'élément et les notes de l'élément dans le formulaire, cliquer sur le bouton \"Ajouter\" et vérifier si le contenu que nous avons ajouté apparaît dans la liste :" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('should create an item from the form', async () => {\n // Fill the form and submit\n await expect(page).toFill('form input[name=itemName]', 'Contacter avec John');\n await expect(page).toFill('form input[name=itemNotes]', 'Envoyer un email à john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Ajouter' });\n\n // Expect the item has been created\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Contacter avec John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Vous remarquerez que nous utilisons la fonction ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " pour remplir le contenu du formulaire. Cette fonction remplace tout le contenu de l'entrée par le ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Si vous voulez ajouter des caractères à l'entrée sans remplacer le contenu existant, vous pouvez utiliser ", _jsx(_components.code, { children: "page.type(selector, content)" }), " pour ajouter directement le contenu souhaité à l'entrée."] }), "\n", _jsxs(_components.p, { children: ["Cependant, lorsque nous avons de nombreux champs à remplir dans notre formulaire, appeler ", _jsx(_components.code, { children: "toFill" }), " plusieurs fois n'est pas pratique. Dans ce cas, nous pouvons utiliser l'approche suivante pour remplir tout le contenu en un seul appel :"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Contacter avec John',\n itemNotes: 'Envoyer un email à john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "La clé de l'objet fourni est l'attribut name de l'élément input." }), "\n", _jsxs(_components.h2, { id: "résumé", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#résumé", children: _jsx(_components.span, { children: "#" }) }), "Résumé"] }), "\n", _jsx(_components.p, { children: "Nous avons couvert un exemple simple pour introduire les exigences de test communes et les techniques correspondantes d'écriture de code lors de l'utilisation de jest-puppeteer pour les tests de bout en bout. Nous espérons que cela pourra vous aider à comprendre rapidement les bases de l'écriture de code de test jest-puppeteer." }), "\n", _jsx(LogtoCloudButton, { children: "Essayez Logto aujourd'hui" })] }); } 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."); }