Cypress问题：使用预设修改视口后viewportWidth/Height未更新

你猜的完全没错！Cypress.config().viewportWidth确实是默认的全局配置值，不会被cy.viewport(preset)这个运行时操作动态更新。这个方法只是临时修改当前测试用例中的浏览器视口尺寸，并不会改动初始化时的全局配置对象，所以你前后log出来的数值都是默认的1000。

要获取当前实际生效的视口尺寸，有两种可靠的方法：

方法1：通过浏览器window对象获取（推荐） #

cy.viewport()生效后，浏览器的实际视口会对应变化，我们可以直接读取浏览器窗口的innerWidth和innerHeight属性，这是最准确的方式：

cy.log("viewport before");
cy.log("" + Cypress.config().viewportWidth); // 输出默认值1000

cy.viewport(preset) // 比如传入'mobile'、'tablet'或自定义尺寸

// 等待视口生效后获取实际尺寸
cy.window().then(win => {
  cy.log(`当前视口宽度: ${win.innerWidth}`);
  cy.log(`当前视口高度: ${win.innerHeight}`);
});

方法2：使用Cypress内部状态（谨慎使用） #

Cypress内部维护了当前测试的状态，其中包含了当前的视口信息，可以通过Cypress.state()获取，但要注意这是内部API，未来版本可能会有变动，所以优先推荐第一种方法：

cy.viewport(preset);
cy.log(`当前视口宽度: ${Cypress.state('viewportWidth')}`);
cy.log(`当前视口高度: ${Cypress.state('viewportHeight')}`);

另外要注意：cy.viewport()是异步命令，如果你在它之后直接同步调用Cypress.config()，会因为命令队列的执行顺序问题，导致还没等到视口修改完成就读取了值，这也是你之前看到数值没变化的原因之一。用cy.window().then()或者cy.then()包裹后续操作，能确保在视口修改完成后再执行获取逻辑。

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