Merge branch 'release/1.0-page-object' into main

Implemented page objects patterns with reporting results.

README.md

@@ -1,2 +1,29 @@
-# cypress-with-patterns
- Using Cypress to handle testing implementing Page Objects and 
+# 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_](./features/adicionar.feature)
+* [_remover.feature_](./features/remover.feature)
+
+## Page objects pattern
+
+Development with this pattern was done under the branch [feature/page-objects](https://github.com/thiagojacinto/cypress-with-patterns/tree/feature/page-objects).
+
+> Objeto _Home_:
+* [support/](./cypress/support)
+  * [pageObjects/](./cypress/support/pageObjects)
+    * [Home/](./cypress/support/pageObjects/Home)
+      * [elements.components.js](./cypress/support/pageObjects/Home/elements.components.js)
+      * [index.js](./cypress/support/pageObjects/Home/index.js)
+
+> Testes:
+* [integration/](./cypress/integration)
+  * [page-objects/](./cypress/integration/page-objects)
+    * [adicionar.spec.js](./cypress/integration/page-objects/adicionar.spec.js)
+    * [remover.spec.js](./cypress/integration/page-objects/remover.spec.js)

cypress.json

@@ -1,5 +1,16 @@
 {
   "video": false,
   "nodeVersion": "system",
-  "baseUrl": "https://repo-listing.web.app"
+  "baseUrl": "https://repo-listing.web.app",
+  "testFiles": "page-objects/**.spec.js",
+
+  "reporter": "mochawesome",
+  "reporterOptions": {
+    "reportDir": "results/reports-mochawesome",
+    "overwrite": false,
+    "html": false,
+    "json": true,
+    "quiet": true,
+    "charts": true
+  }
 }

cypress/config/cypress.reporter.json

@@ -1,6 +1,7 @@
 {
   "reporter": "mochawesome",
   "reporterOptions": {
+    "charts": true,
     "reportDir": "results",
     "overwrite": false,
     "html": false,

cypress/integration/page-objects/adicionar.spec.js

@@ -0,0 +1,36 @@
+/// <reference types="cypress" />
+
+import myHome from "../../support/pageObjects/Home"
+
+describe("Adicionar", () => {
+
+  beforeEach(() => {
+    cy.viewport("samsung-note9");
+    myHome.acessar();
+  });
+
+  it("Adicionar repositório a lista", () => {
+    myHome.inserir("thiagojacinto/es6-review")
+    myHome.clicarAdicionar()
+    myHome.selecionarLista().children().should("contain.text", "es6-review");
+    myHome.selecionarItemsDaLista().should("have.length", 1)
+  });
+
+  it("Adicionar mais de um repositório", () => {
+    myHome.inserir("thiagojacinto/es6-review");
+    myHome.clicarAdicionar();
+    myHome.selecionarItemsDaLista().should("have.length", 1);
+    myHome.inserir("cypress-io/cypress-example-recipes");
+    myHome.clicarAdicionar();
+    myHome.selecionarItemsDaLista().should("have.length", 2);
+    myHome.inserir("rust-lang/rust");
+    myHome.clicarAdicionar();
+    myHome.selecionarItemsDaLista().should("have.length", 3);
+  });
+
+  it('Tentar adicionar sem inserir nome', () => {
+    myHome.clicarAdicionar();
+    myHome.selecionarItemsDaLista().should("have.length", 0);
+  });
+
+});

cypress/integration/page-objects/remover.spec.js

@@ -0,0 +1,41 @@
+/// <reference types="cypress" />
+
+import myHome from "../../support/pageObjects/Home"
+
+describe("Remover", () => {
+  beforeEach(() => {
+    cy.viewport("iphone-xr");
+  });
+
+  describe("Lista com itens na home", () => {
+
+    beforeEach(() => {
+      myHome.acessar();
+      myHome.popularLista(170);
+    });
+
+    it("Remover um dos repositórios da lista", () => {
+      myHome.removerPrimeiroItem();
+      myHome.selecionarItemsDaLista().should("have.length", 2);
+    });
+
+    it("Remover mais de um dos repositórios da lista", () => {
+      myHome.removerPrimeiroItem();
+      myHome.removerPrimeiroItem();
+      myHome.selecionarItemsDaLista().should("have.length", 1);
+    });
+
+    it("Limpar a lista", () => {
+      myHome.limparLista();
+      myHome.selecionarItemsDaLista().should("not.exist");
+    });
+  });
+
+  it("Tentar limpar uma lista vazia", () => {
+    myHome.acessar();
+    myHome.limparLista();
+    myHome.selecionarItemsDaLista()
+      .should("not.exist");
+  });
+
+});

cypress/support/pageObjects/Home/elements.components.js

@@ -0,0 +1,8 @@
+export const ELEMENTS = {
+  input: "input#repository__input",
+  submitButton: "button#btn__add",
+  clearButton: "button#btn__clear_all",
+  unorderedList: "ul#repo__list",
+  listItems: "ul#repo__list li",
+  listItemRemoveButton: `[name="btn__remove"]`
+};

cypress/support/pageObjects/Home/index.js

@@ -0,0 +1,56 @@
+import { ELEMENTS } from "./elements.components";
+
+class Home {
+  acessar() {
+    return cy.visit("");
+  }
+
+  inserir(repositorio = "cypress-io/cypress-example-recipes") {
+    return cy.get(ELEMENTS.input).type(repositorio);
+  }
+
+  clicarAdicionar() {
+    return cy.get(ELEMENTS.submitButton).focus().click();
+  }
+
+  clicarLimpar() {
+    return cy.get(ELEMENTS.clearButton).click();
+  }
+
+  selecionarLista() {
+    return cy.get(ELEMENTS.unorderedList, { timeout: 3000 });
+  }
+
+  selecionarItemsDaLista() {
+    return cy.get(ELEMENTS.listItems, { timeout: 3000 });
+  }
+
+  selecionarPrimeiroBotaoRemover() {
+    return this.selecionarItemsDaLista().within(() => {
+      return cy.get(`[name="btn__remove"]`).first()
+    });
+  }
+
+  removerPrimeiroItem() {
+    return this.selecionarPrimeiroBotaoRemover().click();
+  }
+
+  popularLista(waitFor = 200) {
+    this.inserir("rust-lang/rust");
+    this.clicarAdicionar();
+    this.selecionarItemsDaLista().wait(waitFor);
+    this.inserir("reactjs/reactjs.org");
+    this.clicarAdicionar();
+    this.selecionarItemsDaLista().wait(waitFor);
+    this.inserir("thiagojacinto/es6-review");
+    this.clicarAdicionar();
+    this.selecionarItemsDaLista().wait(waitFor);
+  }
+
+  limparLista() {
+    return cy.get(ELEMENTS.clearButton).click();
+  }
+
+}
+
+export default new Home();

package.json

@@ -1,12 +1,16 @@
 {
   "name": "cypress-with-patterns",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "description": "Playing with Cypress and implementing patterns Page Objects and Screenplay",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "cy:open": "npx cypress open",
-    "cy:run": "npx cypress run"
+    "cy:run": "npx cypress run",
+    "reports:merge": "npx mochawesome-merge ./results/reports-mochawesome/*.json -o results/reports-output/output.json",
+    "reports:generate": "marge -o ./results/reports-output --charts=true --autoOpen=true results/reports-output/output.json",
+    "reports:remove-stdout": "rm -rf results/reports-mochawesome",
+    "cy:report": "npm run cy:run && npm run reports:merge && npm run reports:generate && npm run reports:remove-stdout"
   },
   "repository": {
     "type": "git",