cypress - 自定义事件和 cy.get

Question

我需要一些关于如何处理以下情况的帮助。有一个模式，当关闭时发送 AJAX 请求，如果响应成功，则重绘 Datatables 表。我需要在触发 draw.dt 事件后测试表格的内容。

我获得了对表的引用，然后为 draw.dt 事件设置了一个处理程序。当事件触发时，cypress 报告说 cy.get 不能在测试之外运行。我想在处理此事件时测试实际上已经完成。

处理这种情况的正确方法是什么？

  cy.get('#commChannelModal > .modal-dialog > .modal-content > .modal-footer > .btn-primary')
            .contains(this.edit_controller_interface_data.modals.edit_comm_channel.buttons.save.text)
            .click({force: true}).then(function (){

                cy.wait('@fetchComms').then(function () {

                    cy.get('#commChannelsTable').then(($table) => {
                        $table.on('draw.dt', function () {
                            // Verify in the index if the edited values are saved
                            cy.get('#commChannelsTable').get('tbody > tr:nth-child(3) > td:nth-child(1)')
                            .contains(this.edit_controller_interface_data.modals.edit_comm_channel.fields.connectionType.value)

                            cy.get('#commChannelsTable').get('tbody > tr:nth-child(3) > td:nth-child(2)')
                            .contains(this.edit_controller_interface_data.modals.edit_comm_channel.fields.ipAddress.value)

                            cy.get('#commChannelsTable').get('tbody > tr:nth-child(3) > td:nth-child(3)')
                            .contains(this.edit_controller_interface_data.modals.edit_comm_channel.fields.ipPort.value)
                        })
                    })
                })
            })

https://docs.cypress.io/guides/references/error-messages.html#Cypress-cannot-execute-commands-outside-a-running-test

Answer 1

您的评估是正确的，即在您的事件触发时 cypress 已经完成。这是因为附加一个事件监听器本身不会向 cypress 发出信号，它应该等待它触发(不像在 Node 中附加一个监听器信号到进程不退出脚本)。

但是，在大多数情况下，您不需要等待某个事件。只需将 DOM 命令加入队列 --- Cypress 将等待(默认情况下为 4 秒)，直到 DOM 符合您的预期。如果您需要等待更多时间，请传递自定义 timeout:

describe('test', () => {
    it('test', () => {
        cy.window().then(win => {
            win.redraw = () => {
                setTimeout(() => {
                    win.document.body.innerHTML = `
                        <div class="item">1</div>
                    `;
                }, 5000 );
            };
            win.document.body.innerHTML = `
                <div class="item">0</div>
                <button class="redraw" onclick="redraw()">redraw</button>
            `;
        });

        cy.get('.item').should('contain', '0');
        cy.get('.redraw').click();
        cy.get('.item', { timeout: 6000 }).should('contain', '1');
    });
});

如果还有其他我不明白的事情发生，或者你只是坚持等待事件触发，你可以 cy.wrap 一个 promise 并在事件触发时解决它:

describe('test', () => {
    it('test', () => {
        cy.window().then(win => {
            win.redraw = () => {
                setTimeout(() => {
                    win.document.body.innerHTML = `
                        <div class="item">1</div>
                    `;
                    win.document.dispatchEvent(
                        new win.CustomEvent('custom-event')
                    );
                }, 5000 );
            };
            win.document.body.innerHTML = `
                <div class="item">0</div>
                <button class="redraw" onclick="redraw()">redraw</button>
            `;
        });

        cy.get('.item').should('contain', '0');
        cy.get('.redraw').click();

        cy.wrap(new Promise(resolve => {
            cy.document().then(doc => {
                doc.addEventListener('custom-event', resolve);
            });
        })).then(() => {

            cy.get('.item').should('contain', '1');
        });
    });
});

我派发一个自定义事件只是为了演示目的。您可以使用 draw.dt 事件。