"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "introdução-ao-teste-de-ponta-a-ponta-com-jest-puppeteer", "hProperties": { "id": "introdução-ao-teste-de-ponta-a-ponta-com-jest-puppeteer" } }, "depth": 2, "value": "Introdução ao teste de ponta a ponta com jest-puppeteer" }, { "data": { "id": "configurando-seu-ambiente-de-teste", "hProperties": { "id": "configurando-seu-ambiente-de-teste" } }, "depth": 2, "value": "Configurando seu ambiente de teste" }, { "data": { "id": "apis-comumente-usadas", "hProperties": { "id": "apis-comumente-usadas" } }, "depth": 2, "value": "APIs comumente usadas" }, { "data": { "id": "o-simples-aplicativo-de-lista-de-tarefas", "hProperties": { "id": "o-simples-aplicativo-de-lista-de-tarefas" } }, "depth": 2, "value": "O simples aplicativo de lista de tarefas" }, { "data": { "id": "esperar-que-o-aplicativo-e-seus-dados-tenham-sido-carregados", "hProperties": { "id": "esperar-que-o-aplicativo-e-seus-dados-tenham-sido-carregados" } }, "depth": 2, "value": "Esperar que o aplicativo e seus dados tenham sido carregados" }, { "data": { "id": "esperar-clicar-em-um-botão-específico", "hProperties": { "id": "esperar-clicar-em-um-botão-específico" } }, "depth": 2, "value": "Esperar clicar em um botão específico" }, { "data": { "id": "esperar-que-um-link-externo-seja-aberto-em-uma-nova-aba", "hProperties": { "id": "esperar-que-um-link-externo-seja-aberto-em-uma-nova-aba" } }, "depth": 2, "value": "Esperar que um link externo seja aberto em uma nova aba" }, { "data": { "id": "esperar-criar-um-item-a-partir-do-formulário", "hProperties": { "id": "esperar-criar-um-item-a-partir-do-formulário" } }, "depth": 2, "value": "Esperar criar um item a partir do formulário" }, { "data": { "id": "resumo", "hProperties": { "id": "resumo" } }, "depth": 2, "value": "Resumo" }]; const readingTime = { "minutes": 8, "words": 2324, "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: "Como parte do nosso compromisso em garantir a qualidade do Logto e melhorar continuamente, utilizamos o jest-puppeteer para testes automatizados de ponta a ponta. Isso nos permite iterar rapidamente no desenvolvimento do Logto sem interrupções." }), "\n", _jsx(_components.p, { children: "Neste artigo, compartilharemos nossa experiência em escrever scripts de teste eficientes com jest-puppeteer usando um aplicativo de lista de tarefas simples como exemplo. Nosso objetivo é ajudar você a começar rapidamente a escrever códigos de teste com jest-puppeteer para seus próprios projetos." }), "\n", _jsxs(_components.h2, { id: "introdução-ao-teste-de-ponta-a-ponta-com-jest-puppeteer", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#introdução-ao-teste-de-ponta-a-ponta-com-jest-puppeteer", children: _jsx(_components.span, { children: "#" }) }), "Introdução ao teste de ponta a ponta com jest-puppeteer"] }), "\n", _jsxs(_components.p, { children: ["O teste de ponta a ponta é uma forma de garantir que sua aplicação funcione corretamente do ponto de vista do usuário. Para atingir esse objetivo, utilizamos duas ferramentas essenciais: ", _jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " e ", _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), "."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://jestjs.io/", children: "Jest" }), " é um popular framework de testes em JavaScript que oferece uma API amigável para escrever testes e asserções. É amplamente utilizado para testes unitários e de integração."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }), " é uma biblioteca Node.js desenvolvida pela equipe do Chrome que fornece uma API de alto nível para controlar navegadores Chrome ou Chromium sem cabeça. Isso o torna uma escolha ideal para automatizar interações de navegador em testes de ponta a ponta."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer", children: "jest-puppeteer" }), " é uma configuração pré-definida do Jest que habilita o teste de ponta a ponta com Puppeteer. Ele oferece uma API simples para lançar novas instâncias de navegador e interagir com páginas da web por meio delas."] }), "\n", _jsx(_components.p, { children: "Agora que você tem uma compreensão básica das ferramentas essenciais, vamos mergulhar na configuração do seu ambiente de teste." }), "\n", _jsxs(_components.h2, { id: "configurando-seu-ambiente-de-teste", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#configurando-seu-ambiente-de-teste", children: _jsx(_components.span, { children: "#" }) }), "Configurando seu ambiente de teste"] }), "\n", _jsx(_components.p, { children: "Configurar seu ambiente de teste para testes de ponta a ponta com jest-puppeteer é um processo simples que envolve três etapas principais:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Instalar dependências" }), "\n"] }), "\n", _jsx(_components.p, { children: "No seu projeto (ou criando um novo projeto), abra o terminal e execute:" }), "\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: ["Depois vá para o caminho ", _jsx(_components.code, { children: "node_modules/puppeteer" }), " e instale o Chromium (que é necessário para o 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: "Configurar o Jest" }), "\n"] }), "\n", _jsx(_components.p, { children: "Em seguida, você precisa configurar o Jest para funcionar perfeitamente com o Puppeteer." }), "\n", _jsxs(_components.p, { children: ["Crie um arquivo de configuração do Jest (por exemplo, ", _jsx(_components.code, { children: "jest.config.js" }), ") no diretório raiz do seu projeto, se ainda não tiver um. Nesse arquivo de configuração, especifique jest-puppeteer como preset:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "/ @type {import('jest').Config} */;\nconst config = {\n preset: 'jest-puppeteer',\n // Outras configurações do Jest...\n};\n\nmodule.exports = config;\n" }) }), "\n", _jsxs(_components.p, { children: ["Você pode personalizar outras configurações do Jest neste arquivo, conforme necessário. Para mais informações sobre como personalizar as configurações do Jest, consulte a ", _jsx(_components.a, { href: "https://jestjs.io/docs/configuration", children: "configuração do Jest" }), "."] }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsx(_components.li, { children: "Escreva seus testes" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Crie arquivos de teste no seu projeto, normalmente com a extensão ", _jsx(_components.code, { children: ".test.js" }), ". O Jest descobrirá automaticamente e executará esses arquivos de teste."] }), "\n", _jsxs(_components.p, { children: ["Aqui está um exemplo da ", _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "documentação do 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('deve ter o título \"Google\"', async () => {\n await expect(page.title()).resolves.toMatch('Google');\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "Em seguida, execute o comando para rodar o teste:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npx jest\n" }) }), "\n", _jsx(_components.p, { children: "Seguindo essas três etapas, você terá um ambiente de teste bem configurado para realizar testes de ponta a ponta usando jest-puppeteer." }), "\n", _jsx(_components.p, { children: "No entanto, note que este é apenas um exemplo básico. Para informações mais detalhadas sobre a configuração do ambiente, consulte a documentação relevante:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/getting-started", children: "Jest: Primeiros Passos" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://jestjs.io/docs/puppeteer", children: "Jest: Uso com puppeteer" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://pptr.dev/", children: "Puppeteer" }) }), "\n"] }), "\n", _jsxs(_components.h2, { id: "apis-comumente-usadas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#apis-comumente-usadas", children: _jsx(_components.span, { children: "#" }) }), "APIs comumente usadas"] }), "\n", _jsx(_components.p, { children: "Nos próximos passos, faremos uso das APIs fornecidas pelo Jest, Puppeteer e jest-puppeteer para auxiliar em nossos testes." }), "\n", _jsxs(_components.p, { children: ["O Jest oferece principalmente APIs para organizar testes e asserir resultados esperados. Você pode explorar os detalhes específicos na ", _jsx(_components.a, { href: "https://jestjs.io/docs/api", children: "documentação" }), "."] }), "\n", _jsxs(_components.p, { children: ["As APIs do Puppeteer são projetadas principalmente para interagir com navegadores, e seu suporte para testes pode não ser tão direto. Você pode consultar a ", _jsx(_components.a, { href: "https://pptr.dev/", children: "documentação do Puppeteer" }), " para entender as funcionalidades que ele oferece. Nos exemplos de testes subsequentes, abordaremos alguns casos de uso comuns."] }), "\n", _jsxs(_components.p, { children: ["Como as APIs do Puppeteer não foram originalmente projetadas para testes, usá-las para escrever testes pode ser desafiador. Para simplificar o processo de escrever testes com Puppeteer, jest-puppeteer inclui uma biblioteca embutida chamada ", _jsx(_components.code, { children: "expect-puppeteer" }), ". Ela oferece um conjunto de APIs concisas e amigáveis. A biblioteca é detalhada em sua ", _jsx(_components.a, { href: "https://github.com/argos-ci/jest-puppeteer#recipes", children: "documentação" }), ", que apresenta vários recursos úteis, como mostrado nos exemplos abaixo:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// Asserir que a página atual contém \"Texto na página\"\nawait expect(page).toMatchTextContent('Texto na página');\n\n// Asserir que a página atual possui um elemento div contendo \"Início\"\nawait expect(page).toMatchElement('div', { text: 'Início' });\n\n// Asserir que um botão contendo o texto \"Início\" será clicado\nawait expect(page).toClick('button', { text: 'Início' });\n\n// Asserir que um formulário será preenchido\nawait expect(page).toFillForm('form[name=\"meuFormulario\"]', {\n primeiroNome: 'James',\n ultimoNome: 'Bond',\n});\n" }) }), "\n", _jsx(_components.p, { children: "Nos exemplos seguintes, combinaremos as APIs fornecidas por essas bibliotecas para completar nossos cenários de teste." }), "\n", _jsx(_components.p, { children: "Agora é hora de começar a aprender como escrever código de teste usando nosso simples aplicativo de lista de tarefas." }), "\n", _jsxs(_components.h2, { id: "o-simples-aplicativo-de-lista-de-tarefas", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#o-simples-aplicativo-de-lista-de-tarefas", children: _jsx(_components.span, { children: "#" }) }), "O simples aplicativo de lista de tarefas"] }), "\n", _jsxs(_components.p, { children: ["Supondo que temos um simples aplicativo de lista de tarefas rodando em ", _jsx(_components.code, { children: "http://localhost:3000" }), ", o código HTML principal deste aplicativo é o seguinte:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "

Lista do Alex

\n
Comprar uma maçã
\n
Para o Natal
\n \n
\n
Ler o documento de introdução do Logto
\n
\n Link do documento:\n Começar \n
\n \n

\n \n

\n" }) }), "\n", _jsx(_components.p, { children: "Ao realizar testes de ponta a ponta, pretendemos cobrir os seguintes cenários:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Ao acessar a URL do aplicativo, o aplicativo e seus dados devem carregar corretamente." }), "\n", _jsx(_components.li, { children: "O botão de verificação do item deve ser capaz de ser clicado." }), "\n", _jsx(_components.li, { children: "Clicar em um link externo nas notas do item deve abrir o link em uma nova aba." }), "\n", _jsx(_components.li, { children: "Deve ser possível adicionar um item a partir do formulário." }), "\n"] }), "\n", _jsx(_components.p, { children: "Mais tarde, escreveremos código de teste para validar esses cenários." }), "\n", _jsxs(_components.h2, { id: "esperar-que-o-aplicativo-e-seus-dados-tenham-sido-carregados", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#esperar-que-o-aplicativo-e-seus-dados-tenham-sido-carregados", children: _jsx(_components.span, { children: "#" }) }), "Esperar que o aplicativo e seus dados tenham sido carregados"] }), "\n", _jsx(_components.p, { children: "Consideramos que o aplicativo foi carregado com sucesso quando as seguintes condições são atendidas:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Um elemento com o ID \"app\" deve existir na página após acessar a URL do aplicativo." }), "\n", _jsx(_components.li, { children: "Os dados dentro do aplicativo devem ser renderizados corretamente." }), "\n"] }), "\n", _jsx(_components.p, { children: "Então, escrevemos o seguinte código de teste:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('deve carregar o aplicativo com sucesso', async () => {\n // Ir para a página do aplicativo\n await page.goto('http://localhost:3000');\n\n // Esperar o carregamento do aplicativo\n await page.waitForSelector('#app');\n\n // Esperar que os dados sejam carregados\n await expect(page).toMatchElement('div[class=title]', {\n text: \"Lista do Alex\",\n });\n});\n" }) }), "\n", _jsx(_components.p, { children: "No código:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.goto" }), " é equivalente a digitar \"", _jsx(_components.a, { href: "http://localhost:3000", children: "http://localhost:3000" }), "\" no navegador, permitindo que você navegue para qualquer URL."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "page.waitForSelector" }), " é usado para esperar que um seletor CSS específico corresponda a um elemento em particular, com um tempo de espera padrão de 30 segundos."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "expect(page).toMatchElement" }), " é da biblioteca ", _jsx(_components.code, { children: "expect-puppeteer" }), ". É similar a ", _jsx(_components.code, { children: "page.waitForSelector" }), ", mas também suporta corresponder ao texto dentro de um elemento. Além disso, o tempo de espera padrão para ", _jsx(_components.code, { children: "toMatchElement" }), " é de apenas 500ms."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Pode parecer perfeito à primeira vista, mas ao rodar este teste e implantá-lo em um ambiente de CI, ele ocasionalmente falha após múltiplas execuções. A mensagem de falha indica:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "Após esperar por 500ms, não podemos encontrar um “div” com o nome de classe “title” contendo o texto \"Lista do Alex\".\n" }) }), "\n", _jsx(_components.p, { children: "Com base na informação de falha e no fato de que este teste passa na maioria das vezes, podemos inferir que os dados solicitados pelo aplicativo podem não retornar dentro dos primeiros 500ms após o carregamento do aplicativo. Portanto, queremos esperar que os dados sejam carregados antes de fazer a asserção." }), "\n", _jsx(_components.p, { children: "Normalmente, existem duas abordagens comuns para alcançar isso:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Aumentar o tempo de espera da asserção" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["A partir da mensagem de erro, podemos ver que o tempo de espera padrão para ", _jsx(_components.code, { children: "toMatchElement" }), " é definido em 500ms. Podemos aumentar o tempo de espera adicionando a opção ", _jsx(_components.code, { children: "timeout" }), " à função desta forma:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toMatchElement('div[class=title]', {\n text: \"Lista do Alex\",\n timeout: 2000, // Aumentado para 2s\n});\n" }) }), "\n", _jsx(_components.p, { children: "Essa abordagem pode reduzir a ocorrência de falhas nos testes até certo ponto, mas não resolve completamente o problema porque não podemos saber com certeza quanto tempo é necessário para que os dados sejam buscados." }), "\n", _jsx(_components.p, { children: "Portanto, só usamos esta abordagem quando temos certeza sobre o tempo de espera necessário, como em cenários como \"um tooltip aparece após ficar sobre um elemento por mais de 2 segundos\"." }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsx(_components.li, { children: "Esperar a conclusão da requisição de rede antes de fazer uma asserção" }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Essa é a abordagem correta. Embora possamos não saber quanto tempo a requisição de dados levará, esperar a conclusão da requisição de rede é sempre uma escolha segura. Neste ponto, podemos usar ", _jsx(_components.code, { children: "page.waitForNavigation({ waitUntil: 'networkidle0' })" }), " para esperar que as requisições de rede sejam concluídas:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('deve carregar o aplicativo com sucesso', async () => {\n\tawait page.goto('http://localhost:3000');\n\n\t/*\n\t * Esperar o término das requisições de rede.\n\t * Adicionado aqui para garantir que tanto o aplicativo quanto os dados tenham sido carregados.\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: \"Lista do Alex\",\n\t});\n});\n" }) }), "\n", _jsx(_components.p, { children: "Dessa forma, antes de executarmos a asserção para o aplicativo e seus dados carregados, podemos garantir que nossas requisições de rede já foram concluídas. Isso assegura que o teste produza resultados corretos de forma consistente." }), "\n", _jsxs(_components.h2, { id: "esperar-clicar-em-um-botão-específico", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#esperar-clicar-em-um-botão-específico", children: _jsx(_components.span, { children: "#" }) }), "Esperar clicar em um botão específico"] }), "\n", _jsx(_components.p, { children: "Em seguida, estamos testando a funcionalidade de clicar no botão de verificação dentro de um item." }), "\n", _jsxs(_components.p, { children: ["No aplicativo de exemplo, percebemos que todos os itens compartilham a mesma estrutura. Seus botões de verificação têm o seletor CSS ", _jsx(_components.code, { children: "li[class$=item] > button" }), ", e o texto do botão é sempre \"Verificar\". Isso significa que não podemos especificar diretamente em qual botão de verificação de item clicar. Portanto, precisamos de uma nova solução."] }), "\n", _jsx(_components.p, { children: "Suponha que queremos clicar no botão de verificação do item \"Ler o documento de introdução do Logto\". Podemos dividir isso em duas etapas:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Primeiro, obter uma referência para aquele item específico." }), "\n", _jsx(_components.li, { children: "Em seguida, clicar no botão de verificação localizado dentro desse item." }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('deve ser capaz de clicar no botão de verificação do item ler doc', async () => {\n // Obter a referência do item \"ler doc\"\n const lerDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Ler o documento de introdução do Logto' }\n );\n\n // Esperar clicar no botão relacionado\n await expect(lerDocItem).toClick('button', { text: 'Verificar' });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Como mostrado no código, usamos a função ", _jsx(_components.code, { children: "toMatchElement" }), " para corresponder ao item com ", _jsx(_components.code, { children: "itemName" }), " definido como \"Ler o documento de introdução do Logto\". Em seguida, usamos a referência ", _jsx(_components.code, { children: "lerDocItem" }), " para clicar no botão com o conteúdo de texto 'Verificar' localizado abaixo dele."] }), "\n", _jsxs(_components.p, { children: ["É importante notar que ao obter o ", _jsx(_components.code, { children: "lerDocItem" }), ", o seletor CSS usado é ", _jsx(_components.code, { children: "li[class$=item]:has(div[class$=itemName])" }), ". Este seletor corresponde ao elemento raiz ", _jsx(_components.code, { children: "li" }), " do item, não ao ", _jsx(_components.code, { children: "itemName" }), " dentro dele, porque pretendemos clicar no ", _jsx(_components.code, { children: "button" }), " sob a tag ", _jsx(_components.code, { children: "li" }), " mais tarde."] }), "\n", _jsxs(_components.p, { children: ["O uso de ", _jsx(_components.code, { children: "expect(lerDocItem).toClick" }), " é semelhante ao ", _jsx(_components.code, { children: "toMatchElement" }), ". No código de exemplo, passamos ", _jsx(_components.code, { children: "{ text: 'Verificar' }" }), " para corresponder ainda mais ao ", _jsx(_components.code, { children: "textContent" }), " do botão. No entanto, você pode escolher se deseja ou não corresponder ao conteúdo de texto do botão com base em suas necessidades."] }), "\n", _jsxs(_components.h2, { id: "esperar-que-um-link-externo-seja-aberto-em-uma-nova-aba", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#esperar-que-um-link-externo-seja-aberto-em-uma-nova-aba", children: _jsx(_components.span, { children: "#" }) }), "Esperar que um link externo seja aberto em uma nova aba"] }), "\n", _jsx(_components.p, { children: "Em seguida, queremos testar se conseguimos abrir um link externo em uma nova aba ao clicar nele nas notas do item." }), "\n", _jsx(_components.p, { children: "No aplicativo de exemplo, descobrimos que o item \"Ler o documento de introdução do Logto\" possui um link externo para a documentação do Logto dentro de suas notas. Aqui está nosso código de teste:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('deve abrir um link externo em uma nova aba', async () => {\n // Restringir ao item específico obtendo a referência de \"ler doc\"\n const lerDocItem = await expect(page).toMatchElement(\n 'li[class$=item]:has(div[class$=itemName])',\n { text: 'Ler o documento de introdução do Logto' }\n );\n\n await expect(lerDocItem).toClick('div[class=itemNotes] a', { text: 'Começar' });\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 // Lembre-se de fechar a página após o teste\n await logtoDocPage?.close();\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["No código, utilizamos ", _jsx(_components.code, { children: "toClick" }), " para clicar no link dentro de ", _jsx(_components.code, { children: "itemNotes" }), "."] }), "\n", _jsxs(_components.p, { children: ["Subsequentemente, usamos ", _jsx(_components.code, { children: "browser.waitForTarget" }), " para capturar uma nova aba aberta com a 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: ["Depois de obter a aba, usamos ", _jsx(_components.code, { children: "target.page()" }), " para obter uma instância da página da documentação do Logto e verificar se a página foi carregada."] }), "\n", _jsx(_components.p, { children: "Lembre-se também de fechar a nova página aberta após concluir nosso teste." }), "\n", _jsxs(_components.h2, { id: "esperar-criar-um-item-a-partir-do-formulário", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#esperar-criar-um-item-a-partir-do-formulário", children: _jsx(_components.span, { children: "#" }) }), "Esperar criar um item a partir do formulário"] }), "\n", _jsx(_components.p, { children: "Agora, queremos testar a funcionalidade de adicionar um item." }), "\n", _jsx(_components.p, { children: "Precisamos preencher o nome do item e as notas do item no formulário, clicar no botão \"Adicionar\" e verificar se o conteúdo que adicionamos aparece na lista:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "it('deve criar um item a partir do formulário', async () => {\n // Preencher o formulário e enviar\n await expect(page).toFill('form input[name=itemName]', 'Entrar em contato com John');\n await expect(page).toFill('form input[name=itemNotes]', 'Enviar um e-mail para john@fake.com');\n await expect(page).toClick('form button[type=submit]', { text: 'Adicionar' });\n\n // Esperar que o item tenha sido criado\n await expect(page).toMatchElement('li[class$=item]:has(div[class$=itemName])', {\n text: 'Entrar em contato com John',\n });\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Você perceberá que usamos a função ", _jsx(_components.code, { children: "expect(page).toFill(inputSelector, content)" }), " para preencher o conteúdo do formulário. Essa função substitui todo o conteúdo no input por ", _jsx(_components.code, { children: "content" }), "."] }), "\n", _jsxs(_components.p, { children: ["Se você quiser adicionar alguns caracteres ao input sem substituir o conteúdo existente, pode usar ", _jsx(_components.code, { children: "page.type(selector, content)" }), " para adicionar diretamente o conteúdo desejado ao input."] }), "\n", _jsxs(_components.p, { children: ["No entanto, quando temos muitos campos para preencher em nosso formulário, chamar ", _jsx(_components.code, { children: "toFill" }), " várias vezes não é conveniente. Nesse caso, podemos usar a seguinte abordagem para preencher todo o conteúdo em uma única chamada:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "await expect(page).toFillForm('form', {\n itemName: 'Entrar em contato com John',\n itemNotes: 'Enviar um e-mail para john@fake.com',\n});\n" }) }), "\n", _jsx(_components.p, { children: "A chave do objeto fornecido é o atributo name do elemento input." }), "\n", _jsxs(_components.h2, { id: "resumo", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#resumo", children: _jsx(_components.span, { children: "#" }) }), "Resumo"] }), "\n", _jsx(_components.p, { children: "Cobrimos um exemplo simples para apresentar requisitos de teste comuns e técnicas correspondentes de escrita de código ao usar jest-puppeteer para testes de ponta a ponta. Esperamos que isso possa ajudá-lo a entender rapidamente os fundamentos da escrita de código de teste com jest-puppeteer." }), "\n", _jsx(LogtoCloudButton, { children: "Experimente o Logto hoje" })] }); } 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."); }