使用Cypress 2.1.0做网站功能测试时，如何获取窗口尺寸？

嘿，我来帮你搞定这个问题！在Cypress 2.1.0版本里，你有几种靠谱的方式获取屏幕（准确说是视口）的宽高（WIDTH和HEIGHT），刚好适配你代码里的条件判断需求：

方法一：直接使用Cypress配置属性（推荐用于测试用例的条件注册） #

Cypress内置了视口尺寸的配置项，你可以同步获取当前的视口宽高，非常适合你在it块外面做条件判断的场景：

// 直接从Cypress配置中获取视口宽高
const WIDTH = Cypress.config('viewportWidth');
const HEIGHT = Cypress.config('viewportHeight');

// 你的原有条件判断逻辑
if (WIDTH < 1025 && WIDTH > 480) {
  it('Open search sidebar', function () {
    cy.wait(500);
    cy.get('.FilterStroke_resultsLabel_7gBlM').safeClick();
  });
}

这里要注意：Cypress默认的视口尺寸是1000x660，如果你在测试前用cy.viewport()手动设置过视口（比如cy.viewport(768, 1024)），那Cypress.config返回的就是你设置后的尺寸。

方法二：通过浏览器窗口对象获取（适合测试内部的动态判断） #

如果你需要在测试执行过程中获取当前浏览器窗口的实际宽高（比如页面渲染后的尺寸），可以通过cy.window()获取浏览器上下文，再读取innerWidth和innerHeight：

it('Check and open search sidebar based on window size', function () {
  cy.window().then(win => {
    const WIDTH = win.innerWidth;
    const HEIGHT = win.innerHeight;
    
    if (WIDTH < 1025 && WIDTH > 480) {
      cy.wait(500);
      cy.get('.FilterStroke_resultsLabel_7gBlM').safeClick();
    }
  });
});

这种方式是异步的，所以适合放在it块内部做动态判断，而不是用来条件注册测试用例（因为Cypress的测试用例定义是同步执行的）。

额外说明：获取系统屏幕的真实尺寸 #

如果你的需求是获取用户设备的真实屏幕尺寸（而非Cypress控制的视口），可以用screen对象：

cy.window().then(win => {
  const SCREEN_WIDTH = win.screen.width;
  const SCREEN_HEIGHT = win.screen.height;
  // 后续逻辑...
});

不过在自动化测试场景中，通常用视口尺寸就足够啦，因为Cypress会控制视口来模拟不同设备。

内容的提问来源于stack exchange，提问作者Edgaras Karka