柏树.正在保存用于断言的文本元素

Question

我在将元素保存为文本以稍后用于断言时遇到问题。

cy.getR6('contact-lastName').clear().type('TestarNameChange').then((nameCheck) => {
cy.getR6('contact-lastName').invoke('text').as('nameCheck');
cy.get('.r6modal-buttons-right > .r6btn').click();
cy.get('.r6loader').should('not.be.visible');
cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
})

Cypress给我的回复是："cy.contents((只能接受字符串、数字或正则表达式">

我也尝试过$div方式：

cy.getR6('contact-lastName').then(($div) => {
var nameCheck = $div.text()
cy.get('.r6modal-buttons-right > .r6btn').click();

cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget- content').contains(this.nameCheck);

还试图将其包裹起来，取得了类似的成功。})

Answer 1

在两次测试中都没有犯什么错误。为了解释它，我将把你的代码分成4部分(块1(

//Step 1
cy.getR6('contact-lastName').clear().type('TestarNameChange').then((nameCheck) => {
//Step 2
cy.getR6('contact-lastName').invoke('text').as('nameCheck');
//Step 3
cy.get('.r6modal-buttons-right > .r6btn').click();
cy.get('.r6loader').should('not.be.visible');
//Step 4
cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
})

步骤1-您尝试在nameCheck输入框中键入值，并在.then中引用带有nameCheck的输入框元素(此步骤中没有错误(

步骤2-尝试获取键入的姓氏值并将其分配给Alias。

错误

• 如果您想要的值是按钮名称、段落文本等，则可以使用invoke('text')获取元素的文本值。例如：(<button>Name</button>将使用invoke('text')返回"名称"(但我认为您需要输入框的值。在这种情况下，您需要使用invoke('attr','value')。(在这里，您甚至不必这样做，将在下面添加改进的代码(

步骤3-单击按钮并等待加载程序不显示。此步骤也没有错误。

步骤4-您正在尝试使用先前创建的别名验证值的存在

错误

• 这是柏树开发人员常见的错误之一。您需要了解柏树的异步特性。在代码中，从第2步到第4步的执行过程中，所有操作都将异步执行。这意味着当您使用this.nameCheck时，不会定义nameCheck。因此，您需要等到创建了别名后才能使用它们(可以使用.then来实现(

我正在添加下面的固定代码。我也做了一些修改。

//type the last name and refer the lastname object with the name "lastName"
cy.getR6('contact-lastName').clear().type('TestarNameChange').then((lastName) => {
//extract the value of lastname object with .val() and wrap it with cy.wrap
// assign the wrapped value to aliase named "nameCheck"
//You can use  cy.getR6('contact-lastName').invoke('attr','value').as('nameCheck');insted of the below code too
cy.wrap(lastName.val()).as('nameCheck').then(() =>{
//As you can see, since we used .then, the next steps will be executed after the aliase is created
cy.get('.r6modal-buttons-right > .r6btn').click();
cy.get('.r6loader').should('not.be.visible');
cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
})
})

在第二段代码中，您所犯的错误之一是使用this.引用定义的变量。

另一个错误是使用.text()来提取输入字段(var nameCheck = $div.text()(的值。您应该使用.val()

因此，如果我们执行与块1相同的步骤，根据您的第二次尝试，它将看起来像。

cy.getR6('contact-lastName').clear().type('TestarNameChange').then(($div) => {
var nameCheck = $div.val()
cy.get('.r6modal-buttons-right > .r6btn').click();
cy.get('.r6loader').should('not.be.visible');
cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(nameCheck);
})

无论如何，如果你想使用cy.getR6('contact-lastName').invoke('attr','value').as('nameCheck')，你可以这样更改我的第一个样本，

//Type text
cy.getR6('contact-lastName').clear().type('TestarNameChange');
//create alias and continue
cy.getR6('contact-lastName').invoke('attr','value').as('nameCheck').then(() =>{
cy.get('.r6modal-buttons-right > .r6btn').click();
cy.get('.r6loader').should('not.be.visible');
cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget-content').contains(this.nameCheck);
})

Answer 2

如果您想验证某个元素是否包含文本，请使用以下命令：

cy.get('[r6-personal-details=""] > :nth-child(1) > .r6widget > .r6widget- content').should('contain', this.nameCheck);