Integração do Test Engine e do Playwright (prévia)

Observação

Os recursos de versão preliminar não foram criados para uso em ambientes de produção e podem ter funcionalidade restrita. Esses recursos são disponibilizados antes de um lançamento oficial para que os clientes possam ter acesso antecipado e forneçam comentários.

Visão geral

Power Apps O Test Engine usa o Playwright como sua principal tecnologia de automação de navegador. Essa integração fornece ao Test Engine recursos de teste poderosos, confiáveis e entre navegadores, ao mesmo tempo em que adiciona várias camadas de abstração para simplificar a criação de testes para Power Platform aplicativos.

Como o Test Engine aprimora o Playwright

Embora o Playwright ofereça excelentes recursos de automação de navegador, o Test Engine estende esses recursos especificamente para Power Platform:

Melhoria do mecanismo de teste	Description
Abstrações em nível de aplicativo	O Test Engine funciona com objetos de nível de aplicativo em vez de elementos DOM, tornando os testes mais resilientes às mudanças da IU
Power Fx Integração	O Test Engine adiciona Power Fx suporte, permitindo uma abordagem de baixo código para a criação de testes
Autenticação Integrada	Mecanismos de autenticação pré-construídos lidam com cenários de acesso condicional e Microsoft Entra
Dataverse Integração	A integração direta com Dataverse permite testes abrangentes de ponta a ponta
Provedores Especializados	Provedores otimizados para aplicativos Canvas e aplicativos baseados em modelos

Implementação técnica

As seções a seguir descrevem como o Test Engine se baseia na base de automação de navegador do Playwright e a integra com abstrações específicas, permitindo uma automação de teste robusta e sustentável. Power Platform

Base de automação do navegador

O Test Engine utiliza os principais recursos do Playwright para automação consistente do navegador:

• Suporte para vários navegadores para Chrome, Firefox e Microsoft Edge
• Mecanismos de espera confiáveis que esperam automaticamente que os elementos estejam prontos
• Interceptação de solicitação de rede para simular respostas de API
• Ferramentas de rastreamento e depuração para diagnosticar falhas de teste

Integração arquitetônica do Test Engine

• Camada do provedor: A camada do provedor no Test Engine faz interface diretamente com as APIs do Playwright para controlar o comportamento do navegador
• Modelo de Objeto: Em vez de trabalhar com elementos DOM brutos, o Test Engine mapeia para modelos de objetos específicos do aplicativo
• Power Fx Camada: As etapas de teste escritas em Power Fx são interpretadas e executadas por meio da camada do provedor

Principais características técnicas

As seções a seguir destacam recursos técnicos importantes que o Test Engine adiciona ao Playwright, incluindo seletores específicos do aplicativo, geranciamento de contexto do navegador e acesso direto às funções do Playwright para cenários avançados.

Seletores específicos do aplicativo

O Test Engine usa seletores específicos do aplicativo em vez de CSS ou XPath seletores:

# Test Engine (using app-level selectors)
- testSteps: |
    Select(Button1)

# Equivalent in raw Playwright (using DOM selectors)
    Select(Button1)
# page.locator('div[data-control-name="Button1"]').click();

Gerenciamento de contexto do navegador

O Test Engine gerencia contextos de navegador para dar suporte a vários cenários de autenticação:

# Test Engine handles browser context automatically
pac test run `
   --provider canvas `
   --test-plan-file testplan.te.yaml `
   --tenant $tenantId `
   --environment-id $environmentId

Funções de dramaturgo direto

Embora o Test Engine abstraia muitas interações do Playwright, há cenários em que o acesso direto aos recursos do Playwright pode ser valioso. O Test Engine fornece diversas funções de visualização que permitem interação direta com o Playwright dentro das suas Power Fx etapas de teste.

Usando funções do Playwright no Test Engine

O Test Engine inclui as seguintes funções de visualização que permitem aplicar os recursos de seleção de elementos do Playwright:

Função	Description	Exemplo
Prévia.DramaturgoAção	Executar uma ação em elementos usando seletores CSS ou DOM	Preview.PlaywrightAction("//button", "click") Veja Operações comuns de ação do dramaturgo
Visualização.PlaywrightActionValue	Execute uma ação que requer um parâmetro de valor	Preview.PlaywrightActionValue("//input[@data-id='1']", "fill", "Hello") Veja Operações comuns de valor de ação do dramaturgo
Pré-visualização.Script de dramaturgo	Execute um script C# personalizado que faça interface com o Playwright	Preview.PlaywrightScript("sample.csx") Veja Avançado: Roteiros de dramaturgos personalizados
Visualizar.Pausar	Pausar a execução do teste e exibir o Inspetor de Dramaturgo	Preview.Pause()

Observação

Para usar essas funções de visualização, você deve adicioná-las à lista permitida na seção de configurações de teste.

Operações de ação comuns do dramaturgo

As seguintes operações podem ser executadas com Preview.PlaywrightAction:

Para	Description	Exemplo
click	Seleção de um elemento usando evento de clique	Preview.PlaywrightAction("//button[@id='submit']", "click")
exists	Verifique se um elemento existe	Preview.PlaywrightAction("//div[@class='error-message']", "exists")
wait	Aguarde até que um elemento esteja disponível	Preview.PlaywrightAction("//table[@data-loading='false']", "wait")

Operações comuns de valor de ação do dramaturgo

As seguintes operações podem ser executadas com Preview.PlaywrightActionValue:

Para	Description	Exemplo
fill	Preencha um campo de formulário com texto	Preview.PlaywrightActionValue("//input[@name='search']", "fill", "Product name")
select	Selecione uma opção de uma lista de seleção	Preview.PlaywrightActionValue("//select", "select", "Option2")
setAttribute	Definir um atributo em um elemento	Preview.PlaywrightActionValue("//div", "setAttribute", "data-custom='value'")

Quando usar funções diretas do Playwright

Embora abstrações em nível de aplicativo sejam preferidas, funções diretas do Playwright são úteis nestes cenários:

• Interações complexas da IU não cobertas pelas funções padrão do mecanismo de teste
• Componentes de terceiros dentro de Power Platform aplicativos que necessitam de tratamento especial
• Depuração de cenários de teste complexos onde mais controle é necessário
• Validação avançada de estados ou propriedades de elementos

Exemplo: Abordagem combinada

Este exemplo demonstra a combinação de abstrações no nível do aplicativo com ações diretas do Playwright:

testSteps: |
  # Use app-level abstraction for Power Apps control
  Select(SubmitButton);
  
  # Use direct Playwright action for a third-party component
  Preview.PlaywrightAction("//div[@class='custom-calendar']//button[@data-day='15']", "click");
  
  # Wait for a specific condition using Playwright
  Preview.PlaywrightAction("//div[@data-status='complete']", "wait");
  
  # Resume using app-level abstractions
  Assert(Label1.Text = "Submission Complete");

Avançado: roteiros personalizados do Dramaturgo

Para cenários altamente especializados, você pode criar scripts personalizados do Playwright:

1. Crie um .csx arquivo com sua lógica personalizada do Playwright
2. Referência necessária para montagens de dramaturgos
3. Implementar a estrutura de classe necessária
4. Chame o script a partir das etapas do teste

// sample.csx
#r "Microsoft.Playwright.dll"
#r "Microsoft.Extensions.Logging.dll"
using Microsoft.Playwright;
using Microsoft.Extensions.Logging;

public class PlaywrightScript {
    public static void Run(IBrowserContext context, ILogger logger) {
        Execute(context, logger).Wait();
    }

    public static async Task Execute(IBrowserContext context, ILogger logger) {
        var page = context.Pages.First();
        // Custom Playwright logic here
    }
}

Observação

Preview.PlaywrightScript é implementado apenas para compilações de depuração do Test Engine criado a partir do código-fonte, não na ferramenta pac test run lançada.

Integração com o processo de desenvolvimento

As seções a seguir descrevem como o Test Engine e o Playwright podem ser usados em ambientes de desenvolvimento local e de CI/CD, oferecendo suporte a uma variedade de fluxos de trabalho, desde depuração interativa até execução automatizada de pipeline.

Desenvolvimento local

Para desenvolvimento local, o Test Engine fornece um ambiente completo:

• Execução do navegador local com visibilidade da IU
• Execução de teste passo a passo
• Registros e diagnósticos detalhados

Integração CI/CD

Em ambientes de CI/CD, o Test Engine pode executar o Playwright no modo headless:

# Example Azure DevOps pipeline step
- task: PowerShell@2
  displayName: 'Run Test Engine Tests'
  inputs:
    script: |
      pac test run `
        --provider canvas `
        --test-plan-file "$(Build.SourcesDirectory)/tests/testplan.te.yaml" `
        --tenant "$(TenantId)" `
        --environment-id "$(EnvironmentId)"

Práticas recomendadas

Ao trabalhar com a integração do Playwright do Test Engine:

• Concentre-se em objetos de nível de aplicativo em vez de elementos DOM
• Use Power Fx funções para lógica complexa em vez de JavaScript bruto
• Aproveite os mecanismos de autenticação integrados
• Reserve funções diretas do Playwright para cenários onde as abstrações no nível do aplicativo são insuficientes
• Revisar os testes gerados para otimizar a legibilidade e a manutenção