Cypress Js 测试将 DOM 的内容与其先前的值进行比较答案

【问题标题】：Cypressjs Testing comparing the content of a DOM with it's previous valueCypress Js 测试将 DOM 的内容与其先前的值进行比较
【发布时间】：2019-11-13 20:12:52
【问题描述】：

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

我正在学习使用 cyprus 测试应用程序，这是我的测试代码，其中三个断言通过，我的问题与最后一个断言有关。

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 后，我必须获取计时器的值，以便在时钟滴答一秒或更多秒后检查它是否等于它的值。但是我不知道如何在测试完成时在输入框中输入文本来获取计时器的值。

我在打电话给visit 之前尝试了计时：

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

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

【问题讨论】：

标签： javascript cypress

【解决方案1】：

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

来自cy.clock() 上的赛普拉斯文档

如果您在访问带有cy.visit() 的页面之前调用cy.clock()，则在您的任何应用代码运行之前，该页面的本地全局函数将在窗口load 上被覆盖，因此即使setTimeout，例如，在页面加载时调用，它仍然可以通过cy.tick() 控制。如果在测试过程中重新加载或更改了被测页面，这也适用。

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

【讨论】：