Question

我的目标是在Cypress中为Angular SPA应用开发e2e测试，测试元素是否按预期在不同视口中隐藏/显示。

我尝试使用赛普拉斯viewport命令，但这似乎不会触发window resize event。

此事件是我必须手动分派的吗？谢谢。

更新

问题与Cypress和调整大小无关，而与Angular中的更改检测有关。这里是stackblitz，如果将来其他人需要测试。

Answer 1

无法复制。对我来说，resize事件已在window上正确触发：

（已在3.3.1，3.5.0上进行了测试，无头和无头）

describe('test', () => {
    it('test', () => {
        let resizeEventFired = false;
        cy.window().then(win => {
            win.addEventListener('resize', () => {
                resizeEventFired = true;
            });
        });

        cy.viewport(123, 456);
        cy.wrap().should(() => {
            expect(resizeEventFired).to.eq(true);
        });
    });
});

如果它仍然不适合您，或者您订阅了一些非标准的事件或元素，则可以执行以下操作：

Cypress.Commands.overwrite('viewport', (origFn, ...args) => {
    return origFn(...args).then(() => {
        const window = cy.state('window');
        window.dispatchEvent(new window.UIEvent('resize'));
    });
});

（我正在resize上触发window兼容的事件，但是您可以做任何想做的事。）

使用cy.viewport（）

1 个答案: