如果调用两次，则 cypress 上的 invoke() 方法不起作用

Question

我是 Cypress 的新手，我正在尝试使用现有网页实施一些简单的测试。我对结果有点困惑，因为我两次调用 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

因此，当字体滑块为 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%;");

或者，如果您不想使用滑块，则必须先删除样式属性，然后添加值为 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(".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

赛普拉斯命令运行在一个“链”中，当前的“主题”从一个命令传递到下一个命令。

虽然您认为您保存的是对 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%;")

如果调用两次，则 cypress 上的 invoke() 方法不起作用

invoke() method on cypress doesn't work if called twice

testing

automated-tests

invoke

cypress