如何在 Cypress 中测试 DOM 元素是否发生更改?

问题描述 投票:0回答:1

我正在尝试 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()
  • 获取第0个元素点击过滤选项
    第二个
  • 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,如果是这样,我该如何简洁地做到这一点?

    

typescript cypress
1个回答
0
投票

您想要做的是使用 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
    

© www.soinside.com 2019 - 2024. All rights reserved.