Início / coding / Perguntas / 77673057
Accepted
Tim
Asked: 2023-12-17 09:32:08 +0800 CST

No Cypress, você pode chamar o método .click() em um elemento sem identificar um erro?

  • 772

Eu tenho um aplicativo Angular para o qual estou criando Cypress E2Es.

Uma página do aplicativo possui uma tabela na qual a terceira coluna contém um link que atende pelo nome da classe 'link ng-star-inserted' no qual desejo que o teste clique após encontrar uma linha específica.

E eu realmente fiz o teste para fazer isso - o link foi clicado.

Mas não é muito elegante e sinaliza o método .click() como um erro (mesmo que funcione).

Estou procurando uma maneira de não sinalizar o método .click() como um erro.

Este é o meu código ...

cy.get(SELECTOR.dataTableBody).should('be.visible')
        .contains('tr', 'Text I am looking for in the row I want')
        .then($row => {
            cy.log('found it');
            cy.log('on row ' + $row.index());

            //Yes this is kind of ugly.  I tried it every other way I could think of and this is the only way it worked
            let cellWithLink = $row.find('td:nth-child(3)');
            cellWithLink.children().get(0).getElementsByClassName('link ng-star-inserted').item(0).click();
            
});

E esta é uma imagem de onde o IDE sinaliza click() como um erro - mesmo que realmente funcione.

insira a descrição da imagem aqui

Muito obrigado!

angular

1 respostas

  1. Best Answer

    No código de teste, o HTML se parece com

    <table>
  <tbody class="p-datatable-tbody">
    <tr>
      <td></td>
      <td>Some text</td>
    </tr>
    <tr>
      <td>Text I am looking for in the row I want</td>
      <td></td>
      <td>
        <span>
          <a class="link ng-star-inserted">Click me</a></td>
        </span>
    </tr>
  </tbody>
</table>

    Verificando o typeretornado from .getElementsByClassName(), você pode ver que é um HTMLCollection que é uma coleção genérica de elementos .

    cy.get('table').should('be.visible')
  .contains('tr', 'Text I am looking for in the row I want')
  .then($row => {

    let cellWithLink = $row.find('td:nth-child(3)')

    const link = cellWithLink.children()
      .get(0)
      .getElementsByClassName('link ng-star-inserted')
      // .item(0)
      // .click()

    console.log(link)   // result of getElementsByClassName()
  })

    O item(0)método retorna um elemento que não possui um .click()método (já que esse tipo é para todos os elementos , não apenas para os clicáveis)

    Presumindo que seja o verificador de texto digitado que lança o sinal vermelho (e como você está executando o Angular), você pode tentar a conversão de tipo para HTMLElement , que possui um click()método.

    cy.get('table').should('be.visible')
  .contains('tr', 'Text I am looking for in the row I want')
  .then($row => {

    let cellWithLink = $row.find('td:nth-child(3)')
    const link = cellWithLink.children()
      .get(0)
      .getElementsByClassName('link ng-star-inserted')
      .item(0);
      // .click()

    (link as HTMLElement).click()

  })

    insira a descrição da imagem aqui

    Reduzindo o feio

    Seu teste está começando com consultas Cypress, depois mudando para consultas jQuery e usando consultas HTML nativas (começando em .get(0)).

    Se você quiser mantê-lo Cypress até o fim, isso deve ser suficiente:

    cy.get('table').should('be.visible')
  .contains('tr', 'Text I am looking for in the row I want')
  .find('td:nth-child(3)')
  .find('.link.ng-star-inserted')
  .click()
    • 3

relate perguntas