Cypress.io:将表单输入的值读取并存储到JS变量(或常量)中

时间:2018-08-27 12:55:17

标签: automated-tests html-form cypress

我在一个简单的页面上有一个HTML表单(真的很简单,没有像Ajax这样的棘手的部分,...)。我尝试读取任何输入的默认值(类型=“文本”,再次没有技巧),并将其存储在常量中以供以后使用(断言)。

HTML如下:

<form method="post" ...>
  <input type="text" id="xyz" name="xyz" value="123">
</form>

不起作用的Cypress测试如下:

describe('General tests', function(){

  context('General', function() {

    it('can read the input and store in const', function () {

        cy.visit('http://localhost/settings')
        const xyz = Cypress.$('#xyz').val()
        cy.log(xyz)

    })

  })
})

这不起作用。但是经过几个小时的播放(偶然地,这在更复杂的测试套件= file中对我有用)。我意识到,在以前的测试(= it())访问与上次访问的URL相同的URL的情况下,此构造可以按预期工作。比起奇迹,它更有效。

Cypress测试工作原理如下:

describe('General tests', function(){

  context('General', function() {

    it('makes magic and allows the next test to work', function () {

        cy.visit('http://localhost/settings')

    })

    it('can read the input and store in const', function () {

        cy.visit('http://localhost/settings')
        const xyz = Cypress.$('#xyz').val()
        cy.log(xyz)

    })

  })
})

我认为测试应该是独立的,但是看起来却不是。

我尝试了其他方法来获取输入信息变量的值,而最需要的是使用闭包“ .then()”,但是它只能用于单个输入,不能用于更复杂的形式。 / p>

像“ cy.get('#id_of_input')。should('eq',...)”这样的简单断言可以很好地工作,但是它不允许我使用默认值(并且被测试覆盖)输入。

所以我的问题:

1)以这种方式使用包含的jQuery可以获取输入值并将其存储为常量吗?如果现在我需要对表单中的5个各种输入字段执行此操作的另一种方式(对于Signel输入闭包就好了) 2)测试相互影响是否可以?

感谢大家的帮助。

1 个答案:

答案 0 :(得分:2)

要回答您的问题:


1)根据文档,Cypress.$是“ 同步查询元素的好方法”。 (强调他们的)

您使用它的方式通过异步命令排队规避了赛普拉斯预期的工作流程。如果您不知道我在说什么,我建议您阅读fantastic introduction to Cypress in their documentation

我建议以下内容代替您发布的代码:

cy.visit('http://localhost/settings');
cy.get('#xyz').then(elem => {
    // elem is the underlying Javascript object targeted by the .get() command.
    const xyz = Cypress.$(elem).val();
    cy.log(xyz);
});

.then().使您可以排队等待测试运行程序在测试中按顺序运行的代码。有关命令排队和.then()的更多信息,请参见this answer


2)是的,describe函数可以相互影响是可以的。赛普拉斯分别运行每个文件,但是单独的描述仅按其排队的顺序运行。

例如,以下代码可以正常工作:

let message = "";

describe("Set a value", () => {
    it("Sets a value", () => {
        message = "hi";
    });
});

describe("Retrieve a value", () => {
    it("Retrieves and prints the set value", () => {
        cy.log(message); // Logs "hi" to the Cypress log window
    });
});