Cypressjs Тестирование, сравнивающее содержимое 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.clock() перед вашим `cy.visit (), как вы это делали в первом и втором примере.

Из документации Cypress по cy.clock ()

Если вы позвоните cy.clock() перед посещением страницы с cy.visit(), родной глобальный для этой страницыфункции будут переопределены в окне load до запуска любого кода вашего приложения, поэтому даже если, например, setTimeout вызывается при загрузке страницы, им все равно можно управлять с помощью cy.tick().Это также относится к случаям, когда в ходе теста перезагружается или изменяется тестируемая страница.

Вы также можете рассмотреть возможность передачи {delay: 0} вашей команде .type(), посколькузадержка по умолчанию в 10 миллисекунд между каждым нажатием клавиши, которая в сумме составит некоторое время, которое вы, возможно, не учитываете в своем последующем утверждении.