.gitignore

.DS_Store
cypress.env.json
cypress/screenshots/
cypress/videos/
node_modules/

README.md

writing-cypress-tests-without-cucumber

Demo project for the talk "Writing Cypress Tests Without Cucumber".

cypress.json

{
  "fixturesFolder": false
}

demo.spec.js

describe('Given I am at the Hacker Stories web page', () => {
  beforeEach(() => {
    cy.intercept('GET', '**/search**').as('getStories')
    cy.visit('https://wlsf82-hacker-stories.web.app')
    cy.wait('@getStories')
  })

  it('Then I see 20 results for the default term "React"', () => {
    cy.get('input[type="text"]').should('have.value', 'React')
    cy.get('.item').should('have.length', 20)
  })

  context('When I clear the text field and search for a new term (e.g., "Cypress.io")', () => {
    beforeEach(() => {
      cy.get('input[type="text"]')
        .clear()
        .type('Cypress.io{enter}')
      cy.wait('@getStories')
    })

    it('Then I see a quick search button for the previous term "React"', () => {
      cy.contains('.last-searches button', 'React').should('be.visible')
    })

    it('And I see 20 results for the new searched term', { tags: '@smoke' }, () => {
      cy.get('.item').should('have.length', 20)
    })
  })

  context('When I search for more than 5 random terms', () => {
    const faker = require('faker')
    let randomTerm

    beforeEach(() => {
      Cypress._.times(6, () => {
        randomTerm = faker.lorem.word()

        cy.get('input[type="text"]')
          .clear()
          .type(`${randomTerm}{enter}`)
      })
    })

    it('Then only the last five terms are shown as quick search buttons', () => {
      cy.get('.last-searches button').should('have.length', 5)
    })
  })

  context('When I clear the text field and search based on a list of terms', () => {
    const termsToSearchFor = ['Test Cafe', 'Puppeteer', 'Playwright']

    termsToSearchFor.forEach(term => {
      it(`Then I see 20 results for the term ${term}`, () => {
        cy.get('input[type="text"]')
          .clear()
          .type(`${term}{enter}`)
        cy.wait('@getStories')

        cy.get('.item').should('have.length', 20)
      })
    })
  })

  context('When I dimiss the first item', () => {
    beforeEach(() => {
      cy.get('.button-small')
        .first()
        .click()
    })

    it('Then only 19 results are left', () => {
      cy.get('.item').should('have.length', 19)
    })
  })
})

package.json

{
  "name": "writing-cypress-tests-without-cucumber",
  "version": "1.0.0",
  "description": "Demo project for the talk 'Writing Cypress Tests Without Cucumber'",
  "scripts": {
    "cy:open": "cypress open",
    "smoke:tests": "cypress run --env grepTags=@smoke",
    "test": "cypress run"
  },
  "author": "Walmyr Filho <wlsf82@gmail.com> (https://walmyr.dev)",
  "license": "MIT",
  "devDependencies": {
    "cypress": "^8.3.1",
    "cypress-grep": "^2.5.3",
    "faker": "^5.5.3"
  }
}

plugins-index.js

module.exports = (on, config) => {
  require('cypress-grep/src/plugin')(config)
}

support-index.js

require('cypress-grep')()