如何解析 Cypress 中数据属性的值？

Question

我有一个输入字段：

<input type="range" id="amtRange" value="0" min="280" max="1400">

我想获取

min

属性的值，并查看它是否小于另一个预先存在的值，即

min

属性中的金额 (280) 应小于

amt

变量中的数字.

我可以像这样获取字符串形式的值：

cy.get('#amtRange').invoke('attr', 'min');

但无法弄清楚如何将其作为整数传递。我尝试过以下方法：

const amt = 286;
let minAmt = cy.get('#amtRange').invoke('attr', 'min');
minAmt = parseInt(minAmt);
minAmt.should('be.lessThan', amt);

但这会产生错误：

TypeError: minAmt.should is not a function

。

我也尝试过：

const amt = 286;
cy.get('#amtRange').then(($amtInput) => {
    let minAmt = parseInt($amtInput.invoke('attr', 'min'));
    minAmt.should('be.lessThan', amt);
});

但这会产生错误：

$amtInput.invoke is not a function

。

我怎样才能实现这个目标？

Answer 1

从根本上来说，你的尝试没有意义。在 Cypress 中编写测试时，您缺少一些非常基本的概念。取第一个片段：

let minAmt = cy.get('#amtRange').invoke('attr', 'min');

.invoke

不返回值，它产生它，在Cypress意义上：

Cypress 命令是异步的，并排队等待稍后执行。在执行命令时，它们的主题会从一个命令“产生”到下一个命令。这是因为每个命令之间都会运行许多有用的赛普拉斯代码，以确保一切正常。

即使这

确实

有效，然后： minAmt = parseInt(minAmt);

其实给了你一个号码，下一行：

minAmt.should('be.lessThan', amt);

不跟随； 

minAmt

是一个数字，而不是Cypress链；它没有

should

方法。同样，第二个片段：

cy.get('#amtRange').then(($amtInput) => {
    let minAmt = parseInt($amtInput.invoke('attr', 'min'));
    minAmt.should('be.lessThan', amt);
});

现在您已经获得了实际的 jQuery 元素，如 

$

前缀所示。不过，它没有

invoke

方法；

它有

attr方法

。但话又说回来，即使你做了正确的事：

let minAmt = parseInt($amtInput.attr('min'));

结果是一个数字，没有 

should

方法。

此时您

可以

使用vanilla Mocha断言： expect(minAmt).to.be.lessThan(amt);

但这会影响

重试能力

。理想情况下，您希望有一个末尾带有 should 的查询链。例如，另一种写法是：

cy.get('#amtRange').invoke('attr', 'min').should((minAmt) => {
  expect(parseInt(minAmt)).to.be.lessThan(amt);
});

我强烈建议使用 TypeScript（它会告诉你 

Cypress.Chainable<string>

不是

string

）和/或

ESLint 插件

（它会告诉你不要分配命令返回值）来突出显示这一点很早就犯了这样的错误。