Cypress如何从div获取文本并存储在变量中以备以后使用

Question

我是Cypress的新手，我期待工作的一些事情有着非常奇怪的问题。例如，我试图获取表中某列的值，并在搜索输入中使用该值。我是这样做的：

it('should filter', () => {
    let id = 0;

    cy.get('[data-cy=data-table-row]').should('have.length', 25);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id').should(($div1) => {
        id = $div1.text();
        expect(id).not.to.eq(0);
    });

    //expect(id).not.to.eq(0);

    cy.get('[data-cy=table-filters-search]').find('input').type(id);

    cy.get('[data-cy=data-table-row]').should('have.length', 1);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id').should(($div1) => {
        expect(id).to.eq($div1.text());
    });
});

但是当我运行这个程序时，我得到一个错误，指出[data cy=data table row]的长度是25而不是1。事实证明，我使用的id变量在should方法之外是不可访问的。我想那是因为这是一个promise。

如果我尝试这样做：

it('should filter', () => {
    let id = 0;

    cy.get('[data-cy=data-table-row]').should('have.length', 25);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id').should(($div1) => {
        id = $div1.text();
        expect(id).not.to.eq(0);

        cy.get('[data-cy=table-filters-search]').find('input').type(id);

        cy.get('[data-cy=data-table-row]').should('have.length', 1);

        cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id').should(($div1) => {
            expect(id).to.eq($div1.text());
        });
    });
});

测试进入精神状态，一次又一次地尝试获取[data cy=table filters search]。我不知道为什么。

有没有更简单的方法来获取div的innerText并存储它以供以后比较？

当有人给出回应时，我尝试了这个：

it('should filter', () => {
    let variables = {};

    cy.get('[data-cy=data-table-row]').should('have.length', 25);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id').then(($div1) => {
        variables.id = $div1.text();
        expect(variables.id).not.to.be.undefined;
    });

    console.log(variables);

    expect(variables.id).not.to.be.undefined;
    cy.get('[data-cy=table-filters-search]').find('input').type(variables.id);

    cy.get('[data-cy=data-table-row]').should('have.length', 1);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id').then(($div1) => {
        expect(variables.id).to.eq($div1.text());
    });
});

但是第二个expect（variables.id）测试失败。不到是未定义




Answer 1

如果您想在单个案例中使用它，Allias是cypress的方法：

cy.wrap('value').as('variable') //setting the variable
cy.get('@variable') // with this you can call it at any time in the test after aliasing
   .then(variable =>{
      //here you can use it
   })

对于在多种情况下使用的变量，我建议使用对象作为参考

let variables = {} //This would need to be declared on the scope you wish to use it in 
cy.get('element')
   .then($el => {
      variables.elText = $el.text() //Assigning the value
    })
    
cy.log(variables.elText) //You can call it later like this

Answer 2

闭合问题

第一个例子的问题是测试分两个阶段运行。第一阶段设置队列中的命令，第二阶段运行它们。

在第一阶段，。键入（id）“捕获”id的当前值（即“0”），并在第二阶段使用该值。

您可以通过两种方式修复它，使用别名或在回调中移动类型（id），如第二个示例所示。

这可以通过推迟cy.get（...）。找到（'输入'）。类型（id）直到id实际上已经改变。

重试问题

第二个示例的问题是，回调中带有expect的should（）将重试，直到成功或超时。

回调中的某些内容持续失败（或抛出错误），导致持续重试。它应该暂停，不知道为什么不会发生。

您可以将回调的部分分成两个部分，并使用不尝试重试的. so（）。

cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id')
  .should(($div1) => {
    id = +$div1.text();         // Note $div1.text() is always a string
                                // so convert with "+" to compare numbers
    expect(id).not.to.eq(0)     // otherwise this always succeeds 
                                
  })                            
  .then(($div1) => {            // use a then which does not retry

    id = $div1.text();
    cy.get('[data-cy=table-filters-search]').find('input').type(id);

    cy.get('[data-cy=data-table-row]').should('have.length', 1);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id')
      .should(($div1) => {
        expect(id).to.eq($div1.text()) 
      });

  })

或者

cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id')
  .invoke('text')               // find it's text
  .should('not.eq', '0')        // passes on the id
  .then(id => {                 

    cy.get('[data-cy=table-filters-search]').find('input').type(id);

    cy.get('[data-cy=data-table-row]').should('have.length', 1);

    cy.get('[data-cy=data-table-row]:nth-child(1) > .cdk-column-id')
      .should($div1 => expect(id).to.eq($div1.text()) );

  })