我正在尝试 Cypress(使用 TypeScript),看看它是否适合 E2E 测试特定的 Web 应用程序。我面临的挑战之一是我没有播种器来轻松地重新创建数据库;理想的情况是从测试中完全远程控制应用程序,以便数据库对于每次测试都是新鲜的。这是我无法做出的决定,因此(目前)我别无选择,只能针对数据库是最新生产副本的临时环境进行测试。
这意味着,当我在测试中采取操作时,它应被视为对 DOM 中的某些内容进行“更改”的充分测试。例如,我想测试一个过滤屏幕,当应用过滤器时,结果一定与之前不同。然而,事实证明这相当棘手。 这是应用过滤器的代码:
visitCountryPage();
cy
.get('#sharedTrips .filtersContainer button')
.then((buttons: JQuery<HTMLElement>) => {
buttons[0].click();
})
// Now click on a menu option
.get('#sharedTrips .filtersContainer label[for="experiencesrelax"]')
.click();
发生的事情是这样的:
第一个
get()
then()
get()
let initialIdeas: Chainable<JQuery<HTMLElement>> = getTripIdeas();
cy
.get('#sharedTrips .filtersContainer button')
.then((buttons: JQuery<HTMLElement>) => {
buttons[0].click();
})
// Now click on a menu option
.get('#sharedTrips .filtersContainer label[for="experiencesrelax"]')
.click()
.then(() => {
getTripIdeas().should('not.equal', initialIdeas);
});
您可以看到
getTripIdeas()
是一个外部函数,它通过 DOM 读取返回
Chainable<JQuery<HTMLElement>>
。我明白,在代码的顶部,这可能是某种尚未解决的 Promise,但我希望在最终的 then()
中,not.equal
测试能够解决中的新版本和旧版本为了进行有意义的比较。但是,即使我取出最后的 click(),它也会变成绿色,这不应该发生。
我现在想知道对这些已解析 Promise 的对象引用是否总是不同(这就是测试总是通过的原因),因此我应该将它们转换为其中元素的文本内容,以便它们具有可比性。或者我是否错误地假设最后一个
should()
将解决两个 Promise,如果是这样,我该如何简洁地做到这一点?
您想要做的是使用 Chai 断言(
.should()
命令是
expect()
的实现)来比较可链接的结果对象。不幸的是,没有 Chai 方法可以做到这一点。因此您需要使用 .then((valueInsideChainable) =>
打开 Chainable 的包装。为了保留初始值,Cypress 表示您应该使用别名而不是 Javascript 变量。
此外,它应该是一个static
类型别名。请参阅
api/commands/as#Arguments。
cy.wrap(getTripIdeas()).as('initialValues', {type:static});
// actions to change the DOM
cy.get('#sharedTrips .filtersContainer button')
.first()
.click(); // prefer Cypress click to jQuery click
// don't chain after click()
cy.get('#sharedTrips .filtersContainer label[for="experiencesrelax"]')
.click()
cy.wrap(getTripIdeas()).as('finalValues', {type:static});
// compare the variables
cy.get('@initialValues').then(initial => {
cy.get('@finalValues')
.invoke('toArray') // change JQuery<HTMLElement> to HTMLElement[]
.should('deep.eq', initial.toArray())
})
getTripIdeas()
实际上作为自定义命令会更好,因为您要处理可链接的结果。然后可以直接链接它(不需要wrap())。
deep.eq
比较有点幼稚,因为我们正在处理
JQuery<HTMLElement>
,如果这是一个React应用程序,则在单击操作后元素可能会使用新副本重新渲染。最好比较元素的某些方面,例如 innerText
,或
value
HTMLInputElement
。