Use AskUI e Cucumber juntos

Ao definir o comportamento de um sistema em um formato estruturado como o Gherkin, o Behavior-Driven Development (BDD) permite que as equipes preencham a lacuna entre as partes interessadas, testadores e desenvolvedores, evitando mal-entendidos e reduzindo o retrabalho. Como uma abordagem colaborativa, o BDD incentiva todas as partes a trabalharem juntas desde o início, garantindo que todos estejam conectados
na mesma página e que os requisitos sejam capturados com precisão.

Nesse processo, Cucumber é uma ferramenta popular usada para implementar BDD, permitindo que as equipes escrevam testes claros e executáveis ​​que garantem que o sistema se comporte conforme o esperado.

Nesta postagem do blog, mostraremos como configurar o Cucumber em conjunto com o AskUI para definir fluxos de trabalho do AskUI usando os princípios do BDD.

Pré-requisitos

• AskUI instalado e configurado em seu sistema (Windows, Linux, macOS)

• Excluir askui_example/my-first-askui-test-suite.test.ts após a inicialização

Preparar configuração

O Cucumber ainda não funciona bem com a configuração padrão do AskUI (versão 0.20.3). Para que o AskUI funcione bem com o Cucumber, você precisa fazer dois pequenos preparativos, pois o AskUI usa Jest como seu executor.

1. Altere testEnvironmentOptions de Jest

No arquivo askui_example/helpers/jest.config.ts você deve desabilitar esse código incluído no relatório de execução. Você consegue isso adicionando uma propriedade testEnvironmentOptions com a propriedade addCodeInReport definida como false.

const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
};
...

2. Diga ao Jest onde encontrar a implementação para as definições das etapas

Também em askui_example/helpers/jest.config.ts você precisa expandir a propriedade testMatch padrão. Deve incluir arquivos que terminam em step.ts porque armazenaremos a implementação lá.

...
const config: Config.InitialOptions = {
  ...
  testEnvironment: '@askui/jest-allure-circus',
  testEnvironmentOptions: {
    addCodeInReport: false
  },
  testMatch: [ "**/__tests__/**/*.[jt]s?(x)", "**/?(*.) (spec|test|step).[jt]s?(x)" ]
};
...

s?(x)", "**/?(*.) (especificação|teste|etapa).[jt]s?(x)" ] }; ...

Instale jest-pepino

A maneira mais fácil de usar Jest junto com Cucumber é o npm-package jest-cucumber. Vamos instalá-lo com o seguinte comando:

npm install --save-dev jest-cucumber

npm install --save-dev jest-cucumber

Crie um arquivo de recursos básicos

Crie uma pasta de recursos e nela um arquivo Feature
NavigateToWebsite.feature

npm install --save-dev jest-cucumber

projeto_root/ ├─ askui_example/ ├─ recursos/ ├─ NavigateToWebsite.feature ├─ node_modules/ ├─ ...

Escreva o seguinte Recurso
básico neste arquivo:

npm install --save-dev jest-cucumber

Recurso: navegue até um site Cenário: Inserindo o URL correto na barra de endereço do navegador Dado que estou na página de pesquisa do Google Quando digito o URL da página de prática do AskUI Então vou acessar a página da web

Crie as implementações de definições de etapas

Crie o arquivo de definição de etapa askui_example/navigate-to-url.step.ts onde cada teste mapeia para um cenário específico.

npm install --save-dev jest-cucumber

importar { defineFeature, loadFeature } de 'jest-cucumber'; importar { aui } de './helpers/askui-helper'; //Carrega o arquivo de recurso recurso const = loadFeature('features/NavigateToWebsite.feature'); defineFeature(recurso, teste => { // Mapeia para 'Cenário' em seu arquivo de recurso test('Inserindo o URL correto na barra de endereço do navegador', ({ dado, quando, então }) => { dado('Estou na página de pesquisa do Google', async () => { aguarde aui.moveMouse(500, 500).exec(); aguarde aui.mouseLeftClick().exec(); aguarde aui.pressTwoKeys('command', 't').exec(); }); when('Eu digito o URL da página de prática do AskUI', async () => { aguarde aui.typeIn('https://askui.github.io/askui-practice-page/').textfield().exec(); aguarde aui.pressKey('enter').exec(); }); then('Vou chegar à página da web', async () => { aguarde aui.expect().text('Bem-vindo à página de prática do AskUI').exists().exec(); }); }); });

Execute o fluxo de trabalho

Abra seu navegador em tela cheia e inicie o fluxo de trabalho com:

npm install --save-dev jest-cucumber

npm execute asui

Você verá que a execução do fluxo de trabalho abrirá uma nova guia e navegará para a página de prática do AskUI.

Conclusão

Combinar AskUI com Cucumber permite que você escreva fluxos de trabalho AskUI no estilo BDD. Executar seus testes como um usuário humano real os tornará mais realistas para todas as partes interessadas.