thiagojacinto/cypress-with-patterns

Using Cypress & implementing patterns Page Objects and Screenplay

Cypress.io with Patterns

Using Cypress to handle automation tests implementing Page Objects and Screenplay patterns.

BDD Features with Gherkin

The goal was to develop automation tests to the simple list app available at http://repo-listing.web.app

To achieve that, Gherkin features lead the way of thinking the core features of that system. Given/When/Then strategy was used here:

• adicionar.feature
• remover.feature

Page objects pattern

Development with this pattern was done under the branch feature/page-objects.

Object Home:

• support/
  • pageObjects/
    • Home/
      • elements.components.js
      • index.js

Tests:

• integration/
  • page-objects/
    • adicionar.spec.js
    • remover.spec.js

Screenplay pattern

Implementation of this pattern was developed after the page object approuch. Another strategy was using fixture to handle import data from external file (ex: json) and randomize inputs.

Fixture:

• fixtures/
  • repositorios.json

Screenplay pattern base files:

Five original blocks were simplified to 3: Actor, Task and Questions, here translated to Agente, Tarefa e DadoQuandoEntao, respectively.

• support/
  • screenplay/
    • agente/
      • Agente.js
      • Usuario.js
      • index.js
    • dado-quando-entao/
      • DadoQuandoEntao.js
      • index.js
    • tarefa/
      • Tarefa.js
      • index.js
    • utils/
      • index.js
      • naoImplementado.error.js
    • ScreenplayItem.js
    • index.js

Tests:

• integration/
  • screenplay/
    • Tarefas/
      • AcessarHome.tarefa.js
      • AdicionarValorVazio.tarefa.js
      • EsperarListaContendoDoisItens.tarefa.js
      • EsperarListaContendoUmItem.tarefa.js
      • ExibirLista.tarefa.js
      • ExibirListaContendoTres.tarefa.js
      • InserirNovoRepositorio.tarefa.js
      • LimparLista.tarefa.js
      • RemoverItem.tarefa.js
      • VisualizarListaComItens.tarefa.js
      • VisualizarListaVazia.tarefa.js
      • index.js
    • adicionar/
      • adicionar.screenplay.spec.js
    • componentes/
      • home.componentes.js
    • remover/
      • remover.screenplay.spec.js

Lint and precommit hook

This project uses ESLint, Prettier and lint-staged to handle linting operations and precommit hook.

Before hands-on, do not forget to run:

npm install
npx mrm lint-staged