Integração do Test Engine e Playwright (visualização)

Nota

As funcionalidades de pré-visualização não se destinam à produção e poderão ter caraterísticas restritas. Estas caraterísticas estão disponíveis antes do lançamento oficial, para que os clientes possam ter acesso antecipado e enviar comentários.

Descrição geral

Power Apps O Test Engine usa o Playwright como sua principal tecnologia de automação de navegadores. 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 melhora o Playwright

Enquanto o Playwright oferece excelentes recursos de automação do navegador, o Test Engine estende esses recursos especificamente para Power Platform:

Aprimoramento do mecanismo de teste	Description
Abstrações no nível do aplicativo	O mecanismo de teste funciona com objetos no nível do aplicativo em vez de elementos DOM, tornando os testes mais resilientes às alterações da interface do utilizador
Power Fx Integração	O mecanismo de teste adiciona Power Fx suporte, permitindo uma abordagem low-code para a criação de testes
Autenticação integrada	Manipulador de Microsoft Entra mecanismos de autenticação pré-criados e cenários de acesso condicional
Dataverse Integração	A integração direta com Dataverse permite testes abrangentes de ponta a ponta
Fornecedores Especializados	Provedores otimizados para aplicativos Canvas e aplicativos orientados por modelo

Execução técnica

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

Base de automação do navegador

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

• Suporte entre navegadores para Chrome, Firefox e Microsoft Edge
• Mecanismos de espera fiáveis que aguardam automaticamente que os elementos estejam prontos
• Intercetação de solicitações 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 fornecedor: a camada do fornecedor no mecanismo de teste 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 mecanismo de teste mapeia para modelos de objeto específicos do aplicativo
• Power Fx Camada: As etapas de teste escritas são Power Fx interpretadas e executadas através da camada do fornecedor

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, gerenciamento de contexto do navegador e acesso direto às funções do Playwright para cenários avançados.

Seletores específicos do aplicativo

O mecanismo de teste usa seletores específicos do aplicativo em vez de seletores OR CSS XPath :

# 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 oferecer 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 diretas de Playwright

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 várias funções de visualização que permitem a interação direta com o Playwright a partir das etapas Power Fx de teste.

Usando funções de 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:

Function	Description	Exemplo
Preview.PlaywrightAction	Executar uma ação em elementos usando CSS seletores DOM ou	Preview.PlaywrightAction("//button", "click") Ver Operações de Ação Comuns do Dramaturgo
Preview.PlaywrightActionValue	Executar uma ação que requer um parâmetro value	Preview.PlaywrightActionValue("//input[@data-id='1']", "fill", "Hello") Consulte Operações de Valor de Ação de Dramaturgia Comum
Preview.PlaywrightScript	Executar um script C# personalizado que faz interface com o Playwright	Preview.PlaywrightScript("sample.csx") Consulte Avançado: Scripts de dramaturgia personalizados
Pré-visualização.Pausa	Pausar a execução do teste e exibir o Inspetor de Dramaturgia	Preview.Pause()

Nota

Para usar essas funções de visualização, você deve adicionar as funções de visualização à lista de permissões na secção de definições de teste.

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

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

Ação	Description	Exemplo
click	Seleção de um elemento usando o evento click	Preview.PlaywrightAction("//button[@id='submit']", "click")
exists	Verificar se existe um elemento	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:

Ação	Description	Exemplo
fill	Preencher 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 de Playwright

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

• Interações complexas da interface do utilizador não cobertas pelas funções padrão do mecanismo de teste
• Componentes de terceiros em Power Platform aplicações que necessitam de um manuseamento especial
• Depurando cenários de teste complexos onde é necessário mais controle
• 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 de 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: scripts personalizados de dramaturgia

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

1. Crie um .csx arquivo com sua lógica de Playwright personalizada
2. Referência necessária Montagens de dramaturgo
3. Implementar a estrutura de classes necessária
4. Chamar o script a partir das etapas de 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
    }
}

Nota

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

Integração com 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 CI/CD, suportando uma variedade de fluxos de trabalho, desde depuração interativa até execução automatizada de pipeline.

Desenvolvimento local

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

• Execução do navegador local com visibilidade da interface do utilizador
• Execução de testes passo a passo
• Logs e diagnósticos detalhados

Integração CI/CD

Em ambientes 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)"

Melhores práticas

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

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