Compartilhar via

Início Rápido: Configurar testes contínuos de ponta a ponta com o Microsoft Playwright Testing Preview

  • Artigo

Neste início rápido, você configura testes contínuos de ponta a ponta com o Microsoft Playwright Testing Preview para validar se seu aplicativo Web é executado corretamente em diferentes navegadores e sistemas operacionais a cada confirmação de código. Saiba como adicionar seus testes do Playwright a um fluxo de trabalho de CI (integração contínua), como GitHub Actions, Azure Pipelines ou outras plataformas de CI.

Depois de concluir este início rápido, você terá um fluxo de trabalho de CI que executa seu conjunto de testes do Dramaturgo em escala com o Microsoft Playwright Testing.

Importante

O Microsoft Playwright Testing está atualmente em pré-visualização. Para os termos legais que se aplicam aos recursos do Azure que estão em versão beta, versão prévia ou que, de outra forma, ainda não foram lançados em disponibilidade geral, confira os Termos de Uso Complementares para Versões Prévias do Microsoft Azure.

Pré-requisitos

  • Uma conta do GitHub. Se você não tiver uma conta do GitHub, poderá criar uma gratuitamente.
  • Um repositório GitHub que contém suas especificações de teste do Playwright e o fluxo de trabalho do GitHub Actions. Para criar um repositório, consulte Criando um novo repositório.
  • Um fluxo de trabalho do GitHub Actions. Se você precisar de ajuda para começar a usar o GitHub Actions, confira criar seu primeiro fluxo de trabalho

Configurar um token de acesso ao serviço

O Microsoft Playwright Testing usa tokens de acesso para autorizar os usuários a executar testes Playwright com o serviço. Você pode gerar um token de acesso de serviço no portal do Playwright e, em seguida, especificar o token de acesso no arquivo de configuração de serviço.

Para gerar um token de acesso e armazená-lo como um segredo de fluxo de trabalho de CI, execute as seguintes etapas:

  1. Entre no portal do Playwright com sua conta do Azure.

  2. Selecione o ícone de configurações do workspace e vá para a página de tokens de acesso.

    Captura de tela que mostra a página de configurações de tokens de acesso no portal de Playwright Testing.

  3. Selecione Gerar novo token para criar um novo token de acesso para o fluxo de trabalho de CI.

  4. Insira os detalhes do token de acesso e selecione Gerar token.

    Captura de tela que mostra o guia de instalação no portal do Playwright Testing, realçando o botão “Gerar token”.

    Captura de tela que mostra como copiar o token de acesso gerado no portal do Playwright Testing.

  5. Armazene o token de acesso em um segredo de fluxo de trabalho de CI para evitar especificar o token em texto claro na definição do fluxo de trabalho:

    1. Vá para o repositório GitHub e selecione Configurações>Segredos e variáveis>Ações.

    2. Selecione Novo segredo de repositório.

    3. Insira os detalhes do segredo e selecione Adicionar segredo para criar o segredo de CI/CD.

      Parâmetro Valor
      Nome PLAYWRIGHT_SERVICE_ACCESS_TOKEN
      Valor Cole o token de acesso do workspace copiado anteriormente.

    4. Selecione OK para criar o segredo do fluxo de trabalho.

Obter a URL do ponto de extremidade da região de serviço

Na configuração do serviço, você precisa fornecer o ponto de extremidade de serviço específico da região. O ponto de extremidade depende da região do Azure que você selecionou ao criar o espaço de trabalho.

Para obter a URL do ponto de extremidade de serviço e armazená-la como um segredo de fluxo de trabalho de CI, execute as seguintes etapas:

  1. Entre no portal do Playwright com sua conta do Azure.

  2. Na home page do workspace, selecione Exibir guia de instalação.

    Dica

    Se você tiver vários espaços de trabalho, poderá alternar para outro espaço de trabalho selecionando o nome do espaço de trabalho na parte superior da página e selecionando Gerenciar todos os espaços de trabalho.

  3. Em Adicionar ponto de extremidade de região na configuração, copie a URL do ponto de extremidade de serviço.

    A URL do ponto de extremidade corresponde à região do Azure que você selecionou ao criar o espaço de trabalho.

  4. Armazene a URL do ponto de extremidade de serviço em um segredo de fluxo de trabalho de CI:

    Nome do segredo Valor
    PLAYWRIGHT_SERVICE_URL Cole a URL do ponto de extremidade copiada anteriormente.

Adicionar arquivo de configuração de serviço

Se você ainda não configurou seus testes do Playwright para executá-los em navegadores hospedados na nuvem, adicione um arquivo de configuração de serviço ao seu repositório. Na próxima etapa, especifique esse arquivo de configuração de serviço na CLI do Playwright.

  1. Crie um novo arquivo playwright.service.config.ts ao lado do arquivo playwright.config.ts.

    Opcionalmente, use o arquivo playwright.service.config.ts no repositório de exemplo.

  2. Adicione o seguinte conteúdo a ele:

    /*
* This file enables Playwright client to connect to remote browsers.
* It should be placed in the same directory as playwright.config.ts.
*/

import { defineConfig } from '@playwright/test';
import config from './playwright.config';
import dotenv from 'dotenv';

// Define environment on the dev box in .env file:
//  .env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN=XXX
//    PLAYWRIGHT_SERVICE_URL=XXX

// Define environment in your GitHub workflow spec.
//  env:
//    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
//    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
//    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}

dotenv.config();

// Name the test run if it's not named yet.
process.env.PLAYWRIGHT_SERVICE_RUN_ID = process.env.PLAYWRIGHT_SERVICE_RUN_ID || new Date().toISOString();

// Can be 'linux' or 'windows'.
const os = process.env.PLAYWRIGHT_SERVICE_OS || 'linux';

export default defineConfig(config, {
  // Define more generous timeout for the service operation if necessary.
  // timeout: 60000,
  // expect: {
  //   timeout: 10000,
  // },
  workers: 20,

  // Enable screenshot testing and configure directory with expectations.
  // https://learn.microsoft.com/azure/playwright-testing/how-to-configure-visual-comparisons
  ignoreSnapshots: false,
  snapshotPathTemplate: `{testDir}/__screenshots__/{testFilePath}/${os}/{arg}{ext}`,
  
  use: {
    // Specify the service endpoint.
    connectOptions: {
      wsEndpoint: `${process.env.PLAYWRIGHT_SERVICE_URL}?cap=${JSON.stringify({
        // Can be 'linux' or 'windows'.
        os,
        runId: process.env.PLAYWRIGHT_SERVICE_RUN_ID
      })}`,
      timeout: 30000,
      headers: {
        'x-mpt-access-key': process.env.PLAYWRIGHT_SERVICE_ACCESS_TOKEN!
      },
      // Allow service to access the localhost.
      exposeNetwork: '<loopback>'
    }
  },
  // Tenmp workaround for config merge bug in OSS https://github.com/microsoft/playwright/pull/28224
  projects: config.projects? config.projects : [{}]
});

  3. Salve e confirme o arquivo no repositório de código-fonte.

Atualizar a definição de fluxo de trabalho

Atualize a definição de fluxo de trabalho de CI para executar seus testes de Playwright com a CLI do Playwright. Passe o arquivo de configuração de serviço como um parâmetro de entrada para a CLI do Playwright. Configure seu ambiente especificando variáveis de ambiente.

  1. Abrir a definição de fluxo de trabalho de CI

  2. Adicione as etapas a seguir para executar seus testes do Dramaturgo no Microsoft Playwright Testing.

    As etapas a seguir descrevem as alterações de fluxo de trabalho do GitHub Actions ou do Azure Pipelines. Da mesma forma, você pode executar seus testes de Playwright usando a CLI do Dramaturgo em outras plataformas de CI.

    - name: Install dependencies
  working-directory: path/to/playwright/folder # update accordingly
  run: npm ci

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
  run: npx playwright test -c playwright.service.config.ts --workers=20

- name: Upload Playwright report
  uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: path/to/playwright/folder/playwright-report/ # update accordingly
    retention-days: 10

  3. Salve e confirme suas alterações.

    Quando o fluxo de trabalho de CI é disparado, os testes do Dramaturgo serão executados em seu workspace do Microsoft Playwright Testing em navegadores hospedados na nuvem, em 20 trabalhos paralelos.

Cuidado

Com o Microsoft Playwright Testing, você é cobrado com base no número total de minutos de teste. Se você for um usuário iniciante ou começar a usar uma avaliação gratuita, poderá começar com a execução de um único teste em escala, em vez de seu conjunto de testes completo, para evitar esgotar seus minutos de teste gratuitos.

Depois de validar que o teste é executado com êxito, você pode aumentar gradualmente a carga de teste executando mais testes com o serviço.

Você pode executar um teste individual com o serviço usando a seguinte linha de comando:

npx playwright test {name-of-file.spec.ts} --config=playwright.service.config.ts

Habilitar o relatório de resultados do teste

O Microsoft Playwright Testing já dá suporte à exibição dos resultados do teste no Portal do Playwright. Durante a versão prévia, o acesso só está disponível por convite apenas.

Importante

O recurso de relatório do serviço do Microsoft Playwright Testing é gratuito durante a versão prévia somente para convidados. No entanto, a funcionalidade existente de navegador hospedado na nuvem continua sendo cobrada de acordo com o plano de preços do Azure.

Depois de ter acesso à ferramenta de relatório, use as etapas a seguir para configurar seus testes.

  1. Na home page do workspace, navegue até Configurações.

    Captura de tela que mostra a seleção de configurações para um workspace no portal do Playwright Testing.

  2. Em Configurações, selecione Geral e verifique se o relatório está Habilitado.

    Captura de tela que mostra como habilitar relatórios para um workspace no portal do Playwright Testing.

  3. Crie um token de acesso pessoal do GitHub seguindo estas etapas.

    Você precisa fornecer as permissões read:packages para o token. Esse token é chamada de PAT_TOKEN_PACKAGE no restante do artigo.

  4. Armazene o token de GitHub em um segredo de fluxo de trabalho de CI para evitar especificar o token em texto claro na definição do fluxo de trabalho:

    1. Vá para o repositório GitHub e selecione Configurações>Segredos e variáveis>Ações.

    2. Selecione Novo segredo de repositório.

    3. Insira os detalhes do segredo e selecione Adicionar segredo para criar o segredo de CI/CD.

      Parâmetro Valor
      Nome PAT_TOKEN_PACKAGE
      Valor Cole o token de acesso do workspace copiado anteriormente.

    4. Selecione OK para criar o segredo do fluxo de trabalho.

  5. Atualize o arquivo package.json com o pacote.

        "dependencies": {
        "@microsoft/mpt-reporter": "0.1.0-22052024-private-preview"
    }

  6. Atualizar o arquivo Playwright config.

    Adicione o relator do Playwright Testing a Playwright.config.ts da mesma forma que você usa outros relatores.

    import { defineConfig } from '@playwright/test';

export default defineConfig({
    reporter: [
    ['list'],
    ['json', {  outputFile: 'test-results.json' }],
    ['@microsoft/mpt-reporter'] // Microsoft Playwright Testing reporter
    ],
});

    Verifique se os artefatos estão habilitados na configuração para uma melhor solução de problemas.

    use: {
    // ...
    trace: 'on-first-retry',
    video:'retain-on-failure',
    screenshot:'only-on-failure',
    }

  7. Atualize a definição de fluxo de trabalho de CI para instalar o pacote de relatórios antes de executar os testes para publicar o relatório de seus testes Playwright no Microsoft Playwright Testing.

    - name: Install reporting package
  working-directory: path/to/playwright/folder # update accordingly
  run: |
    npm config set @microsoft:registry=https://npm.pkg.github.com
    npm set //npm.pkg.github.com/:_authToken ${{secrets.PAT_TOKEN_PACKAGE}} 
    npm install

- name: Run Playwright tests
  working-directory: path/to/playwright/folder # update accordingly
  env:
    # Access token and regional endpoint for Microsoft Playwright Testing
    PLAYWRIGHT_SERVICE_ACCESS_TOKEN: ${{ secrets.PLAYWRIGHT_SERVICE_ACCESS_TOKEN }}
    PLAYWRIGHT_SERVICE_URL: ${{ secrets.PLAYWRIGHT_SERVICE_URL }}
    PLAYWRIGHT_SERVICE_RUN_ID: ${{ github.run_id }}-${{ github.run_attempt }}-${{ github.sha }}
  run: npx playwright test

    Dica

    Use o serviço do Microsoft Playwright Testing para publicar os resultados do teste no portal, seja qual for o recurso dos navegadores hospedados na nuvem.

Conteúdo relacionado

Você configurou com êxito um fluxo de trabalho de teste de ponta a ponta contínuo para executar seus testes do Playwright em escala em navegadores hospedados na nuvem.