赛普拉斯上的 invoke() 方法在调用两次时不起作用

Question

我是新来的柏树，我正试图使用一个已经存在的网页实现一些简单的测试。我对结果有点困惑，因为我调用了两次invoke():第一次检查初始值(0%)，第二次设置新值并检查更改，但它不起作用，它告诉我它找不到我正在搜索的属性。代码如下:

describe('My first test', function(){
beforeEach(() => {
cy.visit("https://www.wikiwand.com/en/IPv4")
})
it('test1', function() {
const opt = cy.get("#main_menu > li").eq(3).click()
const sty = opt.get(".noUi-origin").first()
sty.invoke("attr", "style").should("include", "left: 0%;")
sty.invoke("attr", "style", "left: 100%;").should("have.attr", "style", "left: 100%;")


})
})

我只是在菜单栏上的个性化按钮，我想改变值serif或sans。两个invoke()的顺序有问题吗?错误是:

*Timed out retrying after 4000ms: cy.invoke() errored because the property: attr does not exist on your subject.
cy.invoke() waited for the specified property attr to exist, but it never did.
If you do not expect the property attr to exist, then add an assertion such as:
cy.wrap({ foo: 'bar' }).its('quux').should('not.exist')*

sty.invoke("attr", "style", "left: 100%;").should("have.attr", "style", "left: 100%;")

有人知道吗?

Answer 1

Font slider当它是Serif样式是left: 0%;，当你拖动滑块到Sans样式是left: 100%;。所以你的测试应该像这样:

cy.visit("https://www.wikiwand.com/en/IPv4");
cy.get("#main_menu > li").eq(3).click();
cy.get(".noUi-origin")
.first()
.invoke("attr", "style")
.should("include", "left: 0%;");
cy.get('[ng-click="$root.fontStyleHandler(1, true)"]').click(); //Drags the slider from Serif to Sans
cy.get(".noUi-origin")
.first()
.invoke("attr", "style")
.should("include", "left: 100%;");

或者，如果你不想使用滑块，那么你必须首先删除style属性，然后添加值为left: 100%;的style属性，在这种情况下，你的测试应该看起来像:

cy.visit("https://www.wikiwand.com/en/IPv4")
cy.get("#main_menu > li").eq(3).click()
cy.get(".noUi-origin")
.first()
.invoke("attr", "style")
.should("include", "left: 0%;")
cy.get(".noUi-origin").first().invoke("removeAttr", "style")
cy.get(".noUi-origin").first().invoke("attr", "style", "left: 100%;")
cy.get(".noUi-origin")
.first()
.invoke("attr", "style")
.should("include", "left: 100%;")

Answer 2

Cypress命令以"链"形式运行，并以当前"主题"运行。从一个命令传递到下一个命令。

虽然您认为您正在保存对const sty = ...中元素的引用，但实际上您正在保存指向内部Cypress主题的指针。

当您执行sty.invoke("attr", "style")时，您现在已经将主题更改为该样式属性，而不是元素。

因此，当您再次尝试sty.invoke("attr", "style")时，sty不再具有attr方法，因此出现错误。

更常规的方法是不存储命令结果。

只是重新查询

const opt = cy.get("#main_menu > li").eq(3).click()
cy.get(".noUi-origin").first()
.invoke("attr", "style")
.should("include", "left: 0%;")
cy.get(".noUi-origin").first()
.invoke("attr", "style", "left: 100%;")
.should("have.attr", "style", "left: 100%;")

或者使用不改变主题的断言

const opt = cy.get("#main_menu > li").eq(3).click()
cy.get(".noUi-origin").first()
.should("have.css", "left", "0px")       // keeps the same subject
.invoke("attr", "style", "left: 100%;")
.should("have.attr", "style", "left: 100%;")