Cypress 和 TypeScript - 视口设备数组 - 'ViewportPreset' 类型

Question

我正在尝试遍历字符串数组，以便对所有测试使用相同的逻辑，但适用于不同的设备尺寸。但是我不知道如何让 TypeScript 对 'ViewportPreset' 的类型感到满意。测试文件如下所示：

/// <reference types="Cypress" />
const dimensions = ["iphone-xr", "samsung-s10"];

context("check responsiveness", () => {
  dimensions.forEach((dimension) => {
    it("check responsiveness", () => {
      cy.viewport(dimension); // <- error
    });
  });
});

我遇到的错误：Argument of type 'string' is not assignable to parameter of type 'ViewportPreset'.ts(2345)。我试图做类似 const dimensions : ViewportPreset[] = ["iphone-xr", "samsung-s10"]; 的事情，但它以 Cannot find name 'ViewportPreset'.ts(2304) 响应。我目前唯一的解决方案是使用 any[]，但我认为通常应该避免使用 any，因为它首先消除了 TypeScript 的所有优势。此外，如果我将其中一个维度手动添加到 cy.viewport()，即使它是一个字符串，我也不会收到任何错误。

Answer 1

您可以明确告诉回调 dimension 是一个 ViewportPreset。

注意 small c on types="cypress" 是惯例，但在这里似乎无关紧要。

在类型中包含 Cypress 命名空间。

/// <reference types="cypress" />

context("check responsiveness", () => {
  dimensions.forEach((dimension: Cypress.ViewportPreset) => { 
    it("check responsiveness", () => {
      cy.viewport(dimension); 
    });
  });
})
  ...

这也有效（而不是上面的）

const dimensions: Cypress.ViewportPreset[] = ['iphone-6', 'ipad-2']

Cypress 和 TypeScript - 视口设备数组 - 'ViewportPreset' 类型

Cypress & TypeScript - Array of viewport devices - 'ViewportPreset' type

arrays

foreach

viewport

typescript

cypress