Why Cypress throw this error: Step implementation missing for...(even when there is implemented step def.)

Question

I am using Cypress version 10.9.0 for e2e testing. Of course, there are more step defs but it stops at the first then step as it can be seen from the SS image.

When('I enter an invalid username on the login page', () => {
    cy.get('#username').type('portal').invoke('removeAttr', 'value').click({ force: true }, { timeout: 30000 })
    cy.get('#password').type('SwY66bc3VZLUFR9')
    cy.get('[type="submit"]').click()
})
 
Then('an error message is displayed with the text Invalid username/password', () => {
    cy.get(".invalid.text-left").should('contain.text', 'Invalid username/password')
})

Cypress GUI error

DOM element

Answer 1

The error says cannot find #username but clearly it is present, so you may have a shadowroot in the DOM above the <input>.

If so, add a configuration to allow searching within, in cypress.config.js

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:1234'
  },
  includeShadowDom: true,
})

If you don't see shadowroot, look for an <iframe> element.
Handling an iframe is best done with Cypress iframe