时间戳

首页 > 解决方案 > Cypressjs 测试将 DOM 的内容与之前的值进行比较

javascript - Cypressjs 测试将 DOM 的内容与之前的值进行比较

问题描述

我的应用程序有一个带有秒(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以便在时钟滴答 1 秒或更多秒后检查它是否与它的值相等。但是我不知道在测试完成时如何在输入框中输入文本来获取计时器的值。

我试着在打电话之前拿时钟visit：

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

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

标签： javascriptcypress

解决方案

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

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

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

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

推荐阅读