javascript - Cypress Js Testing 将 DOM 的内容与其之前的值进行比较

Question

我的应用程序有一个计时器，带有秒 (id#seconds) 和分钟 (id#minutes) 指示器)。它还有一个输入框 (id#input-box) 和一个带有文本的 div (id#text)。当我开始在输入框中输入时，计时器开始计时。当我在 div 中写完内容时它会停止。

我正在学习使用塞浦路斯测试应用程序，这是我的测试代码，其中三个断言通过了，我的问题是最后一个。

var _defaultDummyText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet lacinia lacinia. Donec id auctor risus, eget aliquam metus. Ut quis euismod risus, fermentum suscipit libero. Proin quis facilisis lacus, non sodales odio.'

describe('Timer', function() {
    it('does not start counting before the user starts typing', function() {
        cy.clock()
            .visit('/')
            .tick(2000)
            .get('#seconds').should('have.text', '00')
            .tick(2000)
            .get('#seconds').should('have.text', '00')
    })

    it('starts counting when the user starts typing', function() {
        cy.clock()
            .visit('/')
            .get('#input-box').type('h')
            .tick(1000)
            .get('#seconds').should('have.text', '01')
    })

    it('it counts properly', function() {
        cy.clock()
            .visit('/')
            .get('#input-box').type('h')
            .tick(1000)
            .tick(1000)
            .get('#seconds').should('have.text', '02')
            .get('#input-box').type('o')
            .tick(1000)
            .get('#seconds').should('have.text', '03')
    })

    it('stops when the user is done typing the text', function() {
        cy.visit('/')
            .get('#input-box')
            .type(_defaultDummyText)
            .clock()
            .tick(5000)
            .get('#input-box')
            .type('a')
            .get('#seconds').should('have.text', '??')
    })
})

现在的问题是，当我完成输入 _defaultDummyText 时，我必须获取计时器的值，这样我就可以在时钟滴答 1 秒或更长时间后检查它是否等于它的值。但是我不知道在测试完成时如何在输入框中输入文本来获取计时器的值。

我尝试在调用 visit 之前记录时钟:

cy.visit('/')
    .clock()
    .get('#input-box')
    .type(_defaultDummyText)
    .clock()
    .tick(5000)
    .get('#input-box')
    .type('a')
    .get('#seconds').should('have.text', '??')

但是 clock() 调用会干预浏览器的默认计时器行为，并且计时器永远不会递增。

Answer 1

您需要像在第一个和第二个示例中那样在 cy.visit() 之前调用 cy.clock()。

来自 cy.clock() 上的 Cypress 文档

If you call cy.clock() before visiting a page with cy.visit(), the page’s native global functions will be overridden on window load, before any of your app code runs, so even if setTimeout, for example, is called on page load, it can still be controlled via cy.tick(). This also applies if, during the course of a test, the page under test is reloaded or changed.

您可能还需要考虑将 {delay: 0} 传递给您的 .type() 命令，因为每次击键之间默认有 10 毫秒的延迟，这将加起来您可能不会在以后的断言中考虑的时间。