├── .gitignore ├── README.md ├── cypress.json ├── cypress ├── .DS_Store ├── fixtures │ └── example.json ├── integration │ ├── .DS_Store │ └── Login.feature ├── plugins │ └── index.js └── support │ ├── commands.js │ ├── elements │ └── LoginElements.js │ ├── index.js │ ├── pageobjects │ └── LoginPage.js │ └── steps │ └── LoginSteps.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/* -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # cypress-cucumber-structure 2 |

Estrutra de projeto utilizando Cypress com Cucumber

3 | 4 | Para configurar o Ambiente: 5 |
    6 |
  1. Instalar Node.js.
    2. 7 |
  2. Escolher uma IDE de JavaScript para programar.
    3. 8 |
  3. Instalar o Cypress com Cucumber executando o seguinte comando na raíz da pasta do seu projeto: npm install
    4. 9 |
10 | Para iniciar os testes, execute um dos seguintes comandos no terminal do VS Code: 11 | 16 | Tutorial completo de utilização do Cypress com Cucumber: https://medium.com/@cartelli.gf/testes-automatizados-com-cypress-e-cucumber-d78b211da766 17 | -------------------------------------------------------------------------------- /cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "viewportWidth": 1024, 3 | "viewportHeight": 768, 4 | "defaultCommandTimeout": 10000, 5 | "baseUrl": "https://cwi.com.br/" 6 | } 7 | -------------------------------------------------------------------------------- /cypress/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielcartelli/cypress-cucumber-structure/bc323627ffec143ad1f52c61ff5de140d6c1030d/cypress/.DS_Store -------------------------------------------------------------------------------- /cypress/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io", 4 | "body": "Fixtures are a great way to mock data for responses to routes" 5 | } -------------------------------------------------------------------------------- /cypress/integration/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gabrielcartelli/cypress-cucumber-structure/bc323627ffec143ad1f52c61ff5de140d6c1030d/cypress/integration/.DS_Store -------------------------------------------------------------------------------- /cypress/integration/Login.feature: -------------------------------------------------------------------------------- 1 | Feature: Login site CWI 2 | 3 | Background: Acessar o site da CWI 4 | Given acesso o site CWI 5 | 6 | @testeum 7 | Scenario: Visualizar opção de recuperar senha esquecida 8 | When acesso a pagina de login 9 | Then devo visualizar botao de recuperar senha esquecida 10 | 11 | @testedois 12 | Scenario Outline: Realizar login com dados inválidos 13 | Given acesso a pagina de login 14 | And informo incorreto 15 | And informo incorreta 16 | When clico no botão de realizar login 17 | Then devo visualizar mensagem de erro 18 | 19 | Examples: 20 | | email | senha | 21 | | gabriel.fernando@gmail.com | Senha94030 | 22 | | aquino.agostinho@hotmail.com | 999820SgB | 23 | -------------------------------------------------------------------------------- /cypress/plugins/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example plugins/index.js can be used to load plugins 3 | // 4 | // You can change the location of this file or turn off loading 5 | // the plugins file with the 'pluginsFile' configuration option. 6 | // 7 | // You can read more here: 8 | // https://on.cypress.io/plugins-guide 9 | // *********************************************************** 10 | 11 | // This function is called when a project is opened or re-opened (e.g. due to 12 | // the project's config changing) 13 | 14 | module.exports = (on, config) => { 15 | // `on` is used to hook into various events Cypress emits 16 | // `config` is the resolved Cypress config 17 | } 18 | 19 | const cucumber = require('cypress-cucumber-preprocessor').default 20 | module.exports = (on, config) => { 21 | on('file:preprocessor', cucumber()) 22 | } -------------------------------------------------------------------------------- /cypress/support/commands.js: -------------------------------------------------------------------------------- 1 | // *********************************************** 2 | // This example commands.js shows you how to 3 | // create various custom commands and overwrite 4 | // existing commands. 5 | // 6 | // For more comprehensive examples of custom 7 | // commands please read more here: 8 | // https://on.cypress.io/custom-commands 9 | // *********************************************** 10 | // 11 | // 12 | // -- This is a parent command -- 13 | // Cypress.Commands.add("login", (email, password) => { ... }) 14 | // 15 | // 16 | // -- This is a child command -- 17 | // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... }) 18 | // 19 | // 20 | // -- This is a dual command -- 21 | // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... }) 22 | // 23 | // 24 | // -- This is will overwrite an existing command -- 25 | // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... }) 26 | -------------------------------------------------------------------------------- /cypress/support/elements/LoginElements.js: -------------------------------------------------------------------------------- 1 | class LoginElements { 2 | botaoLogin = () => { return '.main-header-login-content .title' } 3 | 4 | botaoRecuperarSenha = () => { return '.forgot' } 5 | 6 | botaoRealizarLogin = () => { return '[type="submit"]' } 7 | 8 | inputEmail = () => { return '#email' } 9 | 10 | inputSenha = () => { return '#password' } 11 | 12 | mensagemErro = () => { return '.description' } 13 | } 14 | 15 | export default LoginElements; 16 | -------------------------------------------------------------------------------- /cypress/support/index.js: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands' 18 | 19 | // Alternatively you can use CommonJS syntax: 20 | // require('./commands') 21 | -------------------------------------------------------------------------------- /cypress/support/pageobjects/LoginPage.js: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | import LoginElements from '../elements/LoginElements' 4 | const loginElements = new LoginElements 5 | const url = Cypress.config("baseUrl") 6 | 7 | class LoginPage { 8 | // Acessa o site que será testado 9 | acessarSite() { 10 | cy.visit(url) 11 | } 12 | 13 | // Clica no botão que acessa a página de login do site 14 | clicarBotaoPaginaLogin() { 15 | cy.get(loginElements.botaoLogin()).click() 16 | } 17 | 18 | // Clica no botão de realizar login 19 | clicarBotaoRealizarLogin() { 20 | cy.get(loginElements.botaoRealizarLogin()).click() 21 | } 22 | 23 | // Informa email no input do email 24 | informarEmail(email) { 25 | cy.get(loginElements.inputEmail()).type(email) 26 | } 27 | 28 | // Informa senha no input da senha 29 | informarSenha(senha) { 30 | cy.get(loginElements.inputSenha()).type(senha) 31 | } 32 | 33 | // Verifica se o botão tem o texto "Esqueceu sua senha?" 34 | visualizarBotaoRecuperarSenha() { 35 | cy.get(loginElements.botaoRecuperarSenha()).should('contain', 'Esqueceu sua senha?') 36 | } 37 | 38 | // Visualizar mensagem de erro "Usuário ou senha inválidos." 39 | visualizarErroLogin() { 40 | cy.get(loginElements.mensagemErro()).should('contain', 'Usuário ou senha inválidos.') 41 | } 42 | 43 | } 44 | 45 | export default LoginPage; 46 | -------------------------------------------------------------------------------- /cypress/support/steps/LoginSteps.js: -------------------------------------------------------------------------------- 1 | /* global Given, Then, When */ 2 | 3 | import LoginPage from '../pageobjects/LoginPage' 4 | const loginPage = new LoginPage 5 | 6 | And("informo {} incorreto", (email) => { 7 | loginPage.informarEmail(email); 8 | }) 9 | 10 | And("informo {} incorreta", (senha) => { 11 | loginPage.informarSenha(senha); 12 | }) 13 | 14 | Given("acesso o site CWI", () => { 15 | loginPage.acessarSite(); 16 | }) 17 | 18 | When("acesso a pagina de login", () => { 19 | loginPage.clicarBotaoPaginaLogin(); 20 | }) 21 | 22 | When("clico no botão de realizar login", () => { 23 | loginPage.clicarBotaoRealizarLogin(); 24 | }) 25 | 26 | Then("devo visualizar botao de recuperar senha esquecida", () => { 27 | loginPage.visualizarBotaoRecuperarSenha(); 28 | }) 29 | 30 | Then("devo visualizar mensagem de erro", () => { 31 | loginPage.visualizarErroLogin(); 32 | }) -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cypress-structure", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test:chrome": "cypress run --browser chrome --no-exit", 8 | "test:um": "cypress-tags run -e TAGS=@testeum", 9 | "test:dois": "cypress-tags run -e TAGS=@testedois --browser chrome" 10 | }, 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "cypress": "^3.4.0", 15 | "cypress-cucumber-preprocessor": "^1.12.0" 16 | }, 17 | "cypress-cucumber-preprocessor": { 18 | "step_definitions": "cypress/support/steps" 19 | } 20 | } 21 | --------------------------------------------------------------------------------