Search code examples
javascriptcypressprompt

Cypress - Is it possible to verify text in prompt?

Is it possible to verify 'what's your sign'text in prompt? Alert and Confirm can be verified text, but prompt I wonder if possible?

enter image description here

Solution

  • You can set up a stub before the action that triggers the prompt:

    Generally,

    let stub;

cy.window().then(win => {
  stub = cy.stub(win, 'prompt').returns(' World')  // types this value 
})

cy.get('button-opening-prompt').click()

cy.wrap(stub).should(() => {
  expect(stub).to.have.been.calledWith('Hello') // argument is the message
                                                // displayed in the prompt
})

    A simple app that prompts after 2 seconds:

    <body>
  <div>Hello </div>
  <script>
    setTimeout(() => {
      const result = window.prompt('Hello')
      const div = document.querySelector('div')
      div.innerText += result 
    }, 2000)
  </script>
</body>

    This can be tested with

    let stub;

cy.visit('http://127.0.0.1:5500/html/prompt.html', {   
  onBeforeLoad: (win) => {
    stub = cy.stub(win, 'prompt').returns(' World')
  }
})

cy.get('div').should('contain', 'Hello World')   // checks the result added to page

cy.wrap(stub).should(() => {
  expect(stub).to.have.been.calledWith('Hello')
})

    Cancel button

    To test the cancel button being pressed, substitute

    stub = cy.stub(win, 'prompt').callsFake(() => null)