Cypress 使用 cy.viewport 时，如何触发窗口调整大小事件?

在使用 Cypress 进行测试时，cy.viewport() 命令用来设置浏览器窗口的大小，以模拟不同设备的屏幕尺寸。当你调用 cy.viewport() 时，它不仅改变视窗的大小，也会触发浏览器的窗口调整大小事件（即 resize 事件）。这对于测试响应式设计非常有用，因为你可以验证在不同尺寸下应用的表现。

示例：

假设你正在测试一个响应式网站，该网站在窗口大小变化时会改变导航栏的布局。当窗口宽度小于768像素时，导航栏应该切换为汉堡菜单。下面是如何使用 Cypress 来测试这一行为的一个例子：

javascript
describe('导航栏响应性测试', () => {
  it('在小屏幕尺寸下应显示汉堡菜单', () => {
    // 设置视窗尺寸为iPhone 6的屏幕大小
    cy.viewport(375, 667);
    // 访问网站
    cy.visit('http://example.com');
    // 检查是否显示了汉堡菜单
    cy.get('.hamburger-menu').should('be.visible');
  });

  it('在大屏幕尺寸下不应显示汉堡菜单', () => {
    // 设置视窗尺寸为桌面显示器的屏幕大小
    cy.viewport(1920, 1080);
    // 访问网站
    cy.visit('http://example.com');
    // 检查汉堡菜单是否不可见
    cy.get('.hamburger-menu').should('not.be.visible');
  });
});

在上述代码中，cy.viewport() 被用来模拟不同设备的屏幕大小。每次调用 cy.viewport() 后，Cypress 都会自动触发窗口的 resize 事件，使得页面可以根据新的视窗尺寸重新布局。这样，我们可以检查在不同尺寸下页面的表现是否符合预期。

注意事项：

• 确保在调用 cy.visit() 或其他会影响DOM的命令之前设置好视窗大小，这样页面加载时就已经是在正确的尺寸下了。
• 可以在测试中多次调用 cy.viewport() 来模拟用户在使用过程中改变浏览器窗口大小的行为。

使用 cy.viewport() 触发 resize 事件的机制让我们可以有效地测试响应式设计，在不同设备和窗口尺寸下确保应用的UI和功能表现正确。