0

Tudo que você precisa saber sobre as Ferramentas de Teste de Automação : Nightwatch.JS e Cucumber.

G
Glauber Santos

Motivação:


Estou escrevendo esse artigo, porque não achei nenhum artigo referente na DIO, achei de suma importância falar dessas ferramentas de teste de automação escrito em Node.js que não estão listadas nos tópicos das #tags da Dio.


O que é Nightwatch.js?


Nightwatch.js é uma ferramenta de teste automatizado para aplicativos web e sites, escrito em node.js e usando a API W3C WebDriver (anteriormente conhecida como Selenium WebDriver). É uma solução de teste ponta a ponta completa que visa simplificar a escrita de testes automatizados e configurar a integração contínua e entrega contínua.


Como Funciona o Nightwatch.js?

O Nightwatch funciona comunicando-se por meio da API W3C WebDriver usando o protocolo HTTP para instruir os navegadores a fim de executar comandos e asserções em elementos DOM, através do servidor WebDriver ele usa " O ChromeDriver que se comunica com o chrome ou o geckodriver que se comunicar com o firefox, e etc".


Na imagem representação gráfica do DOM. Abordarei esse assunto em outro artigo.


Teoria de Operação

Na imagem representação da comunicação do Nightwatch entre o geckodriver e o browser firefox.


Porque usar o Nightwatch.js em vez de qualquer outra ferramenta de automação?


Como o Nightwatch é uma estrutura de automação, e por aceitar e ter suporte para várias linguagens de programação, fornece teste entre vários navegadores e também é usado em teste de aplicativos web, sites e mobile, uma ótima ferramenta para um ambiente de produção e teste de automação em uma empresa, mas porém para quem não esta familiarizado com as tecnologias Node.js e JavaScript, o Nightwatch é construído em Node.js, e usa exclusivamente o JavaScript como a linguagem de programação para os testes de ponta a ponta que tem como as vantagens.

  • Estrutura leve ;
  • Configuração robusta ;
  • Integração com servidores em nuvem como SauceLabs e Browserstack para web e testes móveis com JavaScript, Appium e etc... ;
  • Permite a configuração com o Cucumber para construir configaração forte de BDD (Behavior Driven Development) ;
  • Alto desempenho da execução de automação ;
  • Melhora a estrutura do teste ;
  • Uso mínimo e menos manutenção do código.


Instalação e Configuração do Nightwatch Framework


Para configurar a estrutura Nightwatch, tudo que você precisa é o seguinte em seu sistema:

  • Node.js versão mais recente
  • Instale o npm


1 $ npm install
install.sh hospedado com ❤ por GitHub


  • Arquivo package.json para configurações de teste e dependências


1 $ npm init
npm.sh hospedado com ❤ por GitHub


  • Instale o Nightwatch e salve como dependência de desenvolvimento


1 $ npm install nightwatch --save-dev
nightwatch_sh hospedado com ❤ por GitHub


  • Instale o Chromedriver ou geckodriver e salve como dependência Dev para executar a operação no navegador necessário


1 $ npm install chromedriver --save-dev
chrome_driver.sh hospedado com ❤ por GitHub


1 {
2	  "name": "demotest",
3	  "version": "1.0.0",
4	  "description": "Demo Practice",
5	  "main": "index.js",
6	  "scripts": {
7	    "test": "nightwatch"
8	  },
9	  "author": "",
10	  "license": "ISC",
11	  "devDependencies": {
12	    "chromedriver": "^74.0.0",
13	    "nightwatch": "^1.0.19"
14	  }
15	}
package.json hospedado com ❤ por GitHub


  • Crie um nightwatch.conf.js para o webdriver e teste as configurações com o nightwatch


1 const chromedriver = require('chromedriver');
2	
3 module.exports = {
4   src_folders : ["tests"], //tests is a folder in workspace                        which has the step definitions
5	  test_settings: {
6	    default: {
7	      webdriver: {
8	        start_process: true,
9	        server_path: chromedriver.path,
10	        port: 4444,
11	        cli_args: ['--port=4444']
12	      },
13	      desiredCapabilities: {
14	        browserName: 'chrome'
15	      }
16	    }
17	  }
18	};

nightwatch.conf.js hospedado com ❤ por GitHub


Usando o Nightwatch - Escrevendo e Executando Testes

Criamos um arquivo JavaScript denominado demo.js para executar um teste atráves do nightwatch com o comando


1 teste de $ npm
npm_test.sh hospedado com ❤ por GitHub


1  //demo.js is a JS file under tests folder
2	module.exports = {
3     'step one: navigate to google' : function (browser) { //step one
4	      browser
5	        .url('https://www.google.com')
6	        .waitForElementVisible('body', 1000)
7	        .setValue('input[type=text]', 'nightwatch')
8	      .waitForElementVisible('input[name=btnK]', 1000)
9	    },
10	  
11	  'step two: click input' : function (browser) { //step two
12	      browser
13	        .click('input[name=btnK]')
14	        .pause(1000)
15	        .assert.containsText('#main', 'Night Watch')
16	        .end(); //to close the browser session after all the steps
17	    }
demo.js hospedado com ❤ por GitHub


Este comando em execução escolhe o valor “nightwatch” da chave “test” no arquivo package.json que atinge a API Nightwatch para acionar a URL no chromedriver.

Pode haver uma ou mais etapas no arquivo demo.js (definição de etapa js) de acordo com o requisito ou casos de teste.

Além disso, é uma boa prática manter um arquivo.js separado para objetos de página, que consiste na estratégia do localizador e nos seletores dos elementos da web da IU.


1 module.exports = {
2	    elements: {
3	      googleInputBox: '//input[@type="text"]',
4	      searchButton: '(//input[@value="Google Search"])[2]',
5	      headingText: `//h3[contains(text(),'Nightwatch.js')]`
6	    }
7	
pageObjects.js hospedado com ❤ por GitHub


A estratégia do localizador é definida como CSS e Xpath para inspecionar os elementos da IU.


1 locateStrategy: async function (selector) { return await selector.startsWith('/') ? 'xpath' : 'css selector'; }
async_function.sh hospedado com ❤ por GitHub


O arquivo Nightwatch.conf.js também é atualizado com o local page_objects.

1 const chromedriver = require('chromedriver');
2	
3	module.exports = {
4	  src_folders : ["tests"], //tests is a folder in workspace which has the step definitions
5	  page_objects_path: 'page_objects/', //page_objects folder where selectors are saved
6	  test_settings: {
7	    default: {
8	      webdriver: {
9	        start_process: true,
10	        server_path: chromedriver.path,
11	        port: 4444,
12	        cli_args: ['--port=4444']
13	      },
14	      desiredCapabilities: {
15	        browserName: 'chrome'
16	      }
17	    }
18	  }
19	};
nightwatch.conf.js hospedado com ❤ por GitHub


Nightwatch & Cucumber.JS

Cucumber é uma ferramenta que suporta Behavior Driven Development (BDD) e permite escrever testes em inglês simples no formato Dado, Quando, Então:

  • É útil envolver as partes interessadas da empresa que não conseguem ler o código facilmente;
  • O Cucumber Testing se concentra na experiência do usuário final;
  • O estilo de escrever testes permite uma reutilização mais fácil de código nos testes;
  • Configuração e execução rápidas e fáceis;
  • Uma ferramenta eficiente para teste.


Nós agora adcionaremos o Cucumber como dependência Dev em nosso código de projeto.


1 $ npm install --save-dev nightwatch-api nightwatch cucumber chromedriver cucumber-pretty
save_dev.sh hospedado com ❤ por GitHub


1 {
2	  "name": "nightwatchdemo",
3	  "version": "1.0.0",
4	  "description": "To learn automation by nightwatch",
5	  "main": "google.js",
6	  "scripts": {
7	    "test": "nightwatch",
8	    "test:cucumber": "cucumber-js --require cucumber.conf.js --require tests --format node_modules/cucumber-pretty"
9	  },
10	  "author": "",
11	  "license": "ISC",
12	  "dependencies": {
13	    "cucumber": "^5.1.0",
14	    "cucumber-pretty": "^1.5.0"
15	  },
16	  "devDependencies": {
17	    "chromedriver": "^2.40.0",
18	    "nightwatch": "^1.0.19",
19	    "nightwatch-api": "^2.2.0"
20	  }
21	}
package.json hospedado com ❤ por GitHub X

O Cucumber pode ser configurado na estrutura Nightwatch para ajudar a manter os cenários de teste em seus arquivos .feature. Criamos um arquivo cucumber.conf.js na pasta raiz que tem a configuração de iniciar, criar e fechar sessões de driver web.


1 const { setDefaultTimeout, AfterAll, BeforeAll } = require('cucumber');
2 const { createSession, closeSession, startWebDriver, stopWebDriver } = require('nightwatch-api');
3	
4	setDefaultTimeout(60000);
5
6	BeforeAll(async () => {
7	  await startWebDriver();
8	  await createSession();
9	});
10	
11	AfterAll(async () => {
12	  await closeSession();
13	  await stopWebDriver();
14	});
cucumber.conf.js hospedado com ❤ por GitHub


Em seguida, criamos um arquivo de recurso que possui os cenários de teste no formato Dado, Quando, Então:


1 Feature: Google Search
2
3 Scenario: Searching Google
4
5 Given I open Google's search page
6 Then the title is "Google"
7 And the Google search form exists
raw
google.feature hospedado com ❤ por GitHub


Para que o Cucumber seja capaz de entender e executar o arquivo de feições, precisamos criar definições de etapas correspondentes para cada etapa de feições que usamos em nosso arquivo de feições. Crie um arquivo de definição de etapa na pasta de testes chamada google.js. As definições de etapa que usam o cliente Nightwatch devem retornar o resultado da chamada api conforme ela retorna uma promessa. Por exemplo;


1 Given(/^I open Google's search page$/, () => { 
2 return client 
3 .url('http://google.com') 
4 .waitForElementVisible('body', 1000);
5	});
return.sh hospedado com ❤ por GitHub


Ou você pode usar também;


1  Given(/^I open Google's search page$/, async () => {
2  await client
3  .url('http://google.com')
4  .waitForElementVisible('body', 1000);
5	});
await_client hospedado com ❤ por GitHub


1 $ npm run e2e-test
npm_run.js hospedado com ❤ por GitHub


1 const { client } = require('nightwatch-api');
2 const { Given, Then, When } = require('cucumber');	
3
4	Given(/^I open Google's search page$/, () => {
5	  return client.url ('http://google.com').waitForElementVisible('body', 1000);
6	});
7	
8	Then(/^the title is "([^"]*)"$/, title => {
9	  return client.assert.title(title);
10	});
11	
12	Then(/^the Google search form exists$/, () => {
13	  return client.assert.visible('input[name="q"]');
14	});
google.js hospedado com ❤ por GitHub


Execução de Arquivos ou Cenários de Características Individuais

  • Arquivos de característica única


1 npm run e2e-test -- features/file1.feature
single_feature.js hospedado com ❤ por GitHub


  • Arquivos de Múltiplo Recursos


1 npm run e2e-test -- features/file1.feature features/file2.feature
npm_feature.js hospedado com ❤ por GitHub


  • Cenário por seu Número de Linhas


1 npm run e2e-test -- features/my_feature.feature:3
npm_test_feature.sh hospedado com ❤ por GitHub


  • Diretório de Recursos


1 npm run e2e-test -- features/dir
feature_directory,sh hospedado com ❤ por GitHub


  • Cenário por seu Nome Correspondendo a uma Expressão Regular


1 npm run e2e-test -- --name "topic 1"
npm_topic.sh hospedado com ❤ por GitHub


Tags de Recurso e Cenário

Cucumber permite adicionar tags a recursos ou cenários e podemos executar seletivamente um cenário usando essas tags. As tags também podem ser usadas com operadores condicionais, dependendo do requisito.

1 # google.feature
2 @google
3 Feature: Google Search
4 @search
5 Scenario: Searching Google 
6 Given I open Google's search page 
7 Then the title is "Google" 
8 And the Google search form exists
search.sh hospedado com ❤ por GitHub


  • Tag única


1 npm execute e2e-test - --tags @google
npm_run_test.sh hospedado com ❤ por GitHub


  • Múltiplas tags


1 npm run e2e-test -- --tags "@google or @duckduckgo"
2 npm run e2e-test -- --tags "(@google or @duckduckgo) and @search"
multiple_tags.sh hospedado com ❤ por GitHub


  • Para pular tags


1 npm run e2e-test -- --tags "not @google"
2 npm run e2e-test -- --tags "not(@google or @duckduckgo)"
skip_tags.sh hospedado com ❤ por GitHub


Repórteres Personalizados em Nightwatch e Cucumber Framework

O relatório é novamente uma vantagem fornecida pelo Cucumber que gera um relatório dos resultados do teste no final da execução e fornece uma pista visual imediata de um possível problema que irá simplificar o processo de depuração. Os relatórios HTML são mais adequados e fáceis de entender devido ao seu formato. Para gerar o mesmo, adicionaremos cucumber-html-reporter como uma dependência em nosso arquivo nightwatch.conf.js.


1 $ npm install --save-dev cucumber-html-reporter mkdirp
npm_save_dev.sh hospedado ❤ por GitHub


Cucumber-html-reporter em node_modules gerencia a criação de relatórios e gera no local de saída após a execução do teste. O recurso de captura de tela pode ser ativado adicionando o trecho de código abaixo em nightwatch.conf.js .


1 module.exports = { 
2 test_settings: { 
3 default: { 
4 screenshots: { 
5 enabled: true, 
6 path: 'screenshots'
7 } }  } };
test_setting.sh hospedado com ❤ por GitHub


O arquivo de configuração do Cucumber pode ser estendido com o tratamento de capturas de tela e anexando-as ao relatório. Além disso, a geração de relatórios HTML pode ser configurada aqui. Este relatório é gerado com base no relatório JSON integrado do Cucumber usando diferentes modelos. Usamos um setTimeout porque queremos executar a geração após o Cucumber terminar com a criação do relatório json.


1   const fs = require('fs');
2	const path = require('path');
3	const { setDefaultTimeout, After, AfterAll, BeforeAll } = require('cucumber');
4	const { createSession, closeSession, startWebDriver, stopWebDriver } = require('nightwatch-api');
5	const reporter = require('cucumber-html-reporter');
6
7	const attachedScreenshots = getScreenshots();
8	
9	function getScreenshots() {
10	  try {
11	    const folder = path.resolve(__dirname, 'screenshots');
12	
13	    const screenshots = fs.readdirSync(folder).map(file => path.resolve(folder, file));
14	    return screenshots;
15	  } catch (err) {
16	    return [];
17	  }
18	}
19
20	setDefaultTimeout(60000);
21
22	BeforeAll(async () => {
23	  await startWebDriver({ env: process.env.NIGHTWATCH_ENV || 'chromeHeadless' });
24	  await createSession();
25	});
26	
27	AfterAll(async () => {
28	  await closeSession();
28	  await stopWebDriver();
30	  setTimeout(() => {
31	    reporter.generate({
32	      theme: 'bootstrap',
33	      jsonFile: 'report/cucumber_report.json',
34	      output: 'report/cucumber_report.html',
35	      reportSuiteAsScenarios: true,
36	      launchReport: true,
37	      metadata: {
38	        'App Version': '0.3.2',
39	        'Test Environment': 'POC'
40	      }
41	    });
42	  }, 0);
43	});
44	
45	After(function() {
46	  return Promise.all(
47	    getScreenshots()
48	      .filter(file => !attachedScreenshots.includes(file))
49	      .map(file => {
50	        attachedScreenshots.push(file);
51	        return this.attach(fs.readFileSync(file), 'image/png');
52	      })
53	  );
54	});
cucumber.conf.js hospedado com ❤ por GitHub


No arquivo package.json, adicionamos o formador JSON que gera um relatório JSON e é usado pelo cucumber-html-reporter para gerar o relatório HTML. Usamos mkdirp para garantir que a pasta de relatório exista antes de executar o teste.


1 "scripts": { 
2 "e2e-test": "mkdirp report && cucumber-js --require cucumber.conf.js --require step-definitions --format node_modules/cucumber-pretty --format json:report/cucumber_report.json" 
3	}
mkdrip.sh hospedado com ❤ por GitHub


Depois de ter adicionado isto, execute o comando novamente.


1 npm run e2e-test
run_test.sh hospedado com ❤ por GitHub


Quando a execução do teste for concluída, o relatório HTML será exibido em uma nova guia do navegador no formato fornecido a seguir:



Conclusão:

Nightwatch vs Cucumber é um ótimo módulo para vincular a acessibilidade do Cucumber.js à robusta estrutura de teste do Nightwatch.js. Juntos, eles podem fornecer documentação facilmente legível do conjunto de testes, mas também testes de usuário automatizados altamente configuráveis, mantendo tudo em JavaScript.

*****************************************************************Referências: https://nightwatchjs.org/

https://cucumber.io/docs/installation/javascript/

https://www.npmjs.com/package/cucumber

https://labs.bawi.io/

https://www.velotio.com/engineering-blog/automation-testing-with-nightwatch-js


Psiuuu: Não esqueça de compartilhar com amigos, comentar e deixar seu joinha, porque pense no trabalho que deu reunir esse material valioso.

0
0

Comentários (1)

1
E

Edith Burgos

28/03/2021 23:00

Que legal Glauber, obrigada por compartilhar isso com a gente! Muito prático!!

None

Brasil