我们如何使用Cypress.io Js自动化框架测试警报和内部显示的文本？

Question

我们如何使用Cypress.io Js自动化框架测试警报和内部显示的文本？我无法在赛普拉斯文档中找到相关示例，请告知。

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!')    

    })

})

Answer 1

这是一种更简单、更直观的方法：

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

我发现stub()这样做的方法过于混乱、不直观且容易出错。

Answer 2

根据Richard Matsen的建议，使用cy.stub（）方法找出答案：

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!')      
    })  

    })

})

Answer 3

使用我无法接受的答案.stub()工作，尽管它是官方赛普拉斯的解决方案alert。显然我并不孤单，所以我想我会分享我的解决方法，以防它帮助同一条船上的人。

扩展@codemon 的答案，如果没有触发警报，此解决方法将使测试失败：

   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