Adicionar propriedade de identificação ou nome ou outros meios de identificação para aplicativos Web Flutter?

Ao escrever um aplicativo Web Flutter, tento aproveitar uma estrutura de teste de interface da Web baseada no Selenium. Infelizmente, não consigo identificar um elemento HTML que representa um determinado widget de vibração por seu atributo id ou nome. A chave do widget não está presente no documento HTML.

Eu consigo usar o conteúdo do widget de texto para encontrar a parte de texto de um widget e encontrar o elemento pai que representa o widget que contém o texto, mas isso falha em imagens, telas etc.

Existe algum mecanismo que eu possa usar para adicionar id / nome (ou qualquer outro meio de identificação) à sopa de tags HTML?

Usando JavaScript, existe uma maneira de percorrer a árvore interna do widget lógico e a partir daí concluir o elemento HTML representativo (por exemplo, por sua localização e tamanho)?

— Martin Kersten
fonte

Oi @ Martin, o que exatamente você está tentando alcançar? Você está tentando usar o Selenium e não pode fazer referência ao item? Ou você está modificando a estrutura DOM / HTML? Alguma chance de você compartilhar algum exemplo de HTML do que é e o que deveria ser? Além disso, exemplos do que exatamente você espera fazer? Obrigado.

— Lefty G Balogh

Gostaria de identificar elementos HTML individuais e os widgets que eles representam. Desejo (facilmente) testar de ponta a ponta a saída HTML de um aplicativo Web Flutter da maneira como estamos acostumados. É uma grande parte do requisito para mudarmos para o Flutter Web.

— Martin Kersten

Talvez você deva tentar com Puppeteer ou Cypress . Eu tive alguns momentos difíceis usando o driver da web Selenium no passado.

— Christos Lytras

Eu verifiquei a maneira como os testes são escritos nas duas estruturas de teste. Usando aqueles eu sofreria o mesmo problema. O Flutter não adiciona nada ao HTML para tornar possível a identificação de certos Widgets de forma confiável.

— Martin Kersten

Ainda acho difícil imaginar todo esse caos sem amostras de fontes, mas observei exemplos de páginas flutuantes e elas são definitivamente estranhas. Desculpas se você já olhou para ele: o flutter parece vir com suas próprias receitas para testar: flutter.dev/docs/cookbook/testing/widget/finders Isso faz algum sentido para você no seu contexto?

— Lefty G Balogh

Respostas:

Eu não acho que seja a maneira correta de usar qualquer tipo de estrutura de teste Selenium para o Flutter Web.

O motivo disso é que você (como desenvolvedor da Web) não tem controle sobre a aparência do DOM gerado. O que significa que você não pode usar o XPath e outros meios para selecionar elementos.

Suponho que a única maneira de testar aplicativos Flutter (incluindo o Flutter Web) seja usar o Flutter Driver: https://api.flutter.dev/flutter/flutter_driver/flutter_driver-library.html

— Alex Radzishevsky
fonte

Prefiro usar o 'reconhecimento' da imagem como no teste de aplicativos para dispositivos móveis. A pilha de ferramentas que usamos para descrever nossos testes da Web / E + E não funciona bem com os recursos de teste de vibração (ou ainda perdemos um ponto).

— Martin Kersten

Atualmente, você não pode adicionar consistentemente informações de identificação à renderização de widgets em diferentes dispositivos.

Para atingir seu objetivo, no entanto, você pode usar o Flutter Driver. O pacote Dart flutter_driver foi projetado especificamente para permitir o teste da interface do usuário dos aplicativos Flutter e fornece uma API para os aplicativos em dispositivos reais, simuladores ou emuladores. Para começar o teste do Flutter Driver, você precisa:

Obtenha o pacote flutter_driver

Configure um diretório de teste

Crie um aplicativo instrumentado para teste

Escreva testes de interface do usuário usando a API flutter_driver

Execute os testes de interface do usuário no dispositivo ou simulador real

Para encontrar um widget Flutter, você pode usar SerializableFinder, por exemplo:

test('verify the text on home screen', () async {
    SerializableFinder message = find.text("Widget Title");
    await driver.waitFor(message);
    expect(await driver.getText(message), "Widget Title");
});

Para mais informações, confira:

— realAlexBarge
fonte