CODEWITHSUNDEEP
javascriptcypress
soccerway
soccerway

Reputation: 11991

How can we test the alert and the text it is displaying using Cypress.io Js automation framework?

How can we test the alert and text inside is displaying using Cypress.io Js automation framework? I am unable to figure out the relevant example in Cypress documentation, please advise.

describe('Test an alert and the text displaying', function() {
it('Verify alert and its text content', function(){
    cy.visit('http://www.seleniumeasy.com/test/javascript-alert-box-demo.html')     
    cy.get('button').contains('Click me!').click()
    cy.on ('window:alert', 'I am an alert box!')    

    })

})

Upvotes: 22

Views: 37270

Answers (6)

Oliver L. Sanz
Oliver L. Sanz

Reputation: 51

Cypress docs now advise to set an alias to the stub. This works fine:

// Give an alias to the stub, so we can use "get" on it.
const alertShown = cy.stub().as("alertShown")

cy.on ('window:alert', alertShown)

cy.contains("button", "Click Me").click()

// By using get, we ensure this will be retried if the checkbox has 
// not been called yet.
cy.get("@alertShown").should("have.been.calledOnceWith", "I am an alert box!")

Upvotes: 3

BalajiK
BalajiK

Reputation: 1

From the Catalog of events available to cypress:

window:alert

Yields: the alert text (String)

Fires when your app calls the global window.alert() method. Cypress will auto accept alerts. You cannot change this behavior.

window:confirm

Yields: the confirmation text (String)

Fires when your app calls the global window.confirm() method. Cypress will auto accept confirmations. Return false from this event and the confirmation will be canceled.

//to validate the alert box string
cy.on('window:alert', (str) => {
  expect(str).to.equal('Please fill out Username and Password.')
})
cy.log('The alert is having the expected text')
//to click the 'ok' button in the alert box 
cy.on('window:confirm', () => true);
cy.log('The alert is having the "ok" button')

Upvotes: 0

jameseg
jameseg

Reputation: 822

If you happen to be using this: alert.js, then maybe I can save you some headache. Try something like this to find the element that is NOT registered with the DOM:

// for example, a button in the modal that needs clicking

// the event that fires the alert
 cy.get('<some element>').click()

 cy.window().then(win => {
        const el = win.Alert.$(`<whatever element you're looking for>`)
        cy.wrap(el)
          .find('button')
          .contains('Confirm')
          .click()
      })

Upvotes: 0

chatnoir
chatnoir

Reputation: 2293

I couldn't get the accepted answer using .stub() to work, despite it being official Cypress solution for alert. Apparently I'm not alone here so I thought I'd share my workaround in case it helps someone in the same boat.

Expanding on @codemon's answer, this workaround will fail the test if no alert was fired:

   var alerted = false;
   cy.on('window:alert', msg => alerted = msg);

   cy.get('button').contains('Click me!').click() //or whatever code that triggers alert
   .then( () => expect(alerted).to.match(/clicked!/); //or whatever regex is appropriate

Upvotes: 7

codemon
codemon

Reputation: 1594

This is a much simpler and more intuitive way:

cy.on('window:alert', (str) => {
  expect(str).to.equal(`This is an alert box!`)
})

I've found the stub() method of doing this to be way too messy, unintuitive and error-prone.

Upvotes: 23

soccerway
soccerway

Reputation: 11991

Figured out the answer using cy.stub() method as advised by Richard Matsen:

describe('Test an alert and the text displaying', function() {
it('Verify alert and its text content', function(){
    cy.visit('http://www.seleniumeasy.com/test/javascript-alert-box-demo.html')    

    const stub = cy.stub()  
    cy.on ('window:alert', stub)
    cy
    .get('button').contains('Click me!').click()
    .then(() => {
      expect(stub.getCall(0)).to.be.calledWith('I am an alert box!')      
    })  

    })

})

Upvotes: 26

Related Questions