Testando o campo de busca no cypress

Imagem 1: Campo de busca

Eu tenho uma sorte incrível de todos os sistemas que testo, sempre existe um campo de busca e sempre com a dificuldade de validar este campo, mas agora encontrei uma solução que irei compartilhar detalhes com você.

Não encontrei uma função do cypress que eu pudesse colocar diretamente no código somente o plugin cy-search mas ele não atende a minha necessidade neste sistema.

Então, fui no Google pesquisar se alguém havia escrito algo sobre esse campo mas não encontrei muita coisa, por isso, escrevo este artigo para lhe auxiliar neste gap do cypress.

Abaixo, vou trazer trechos de códigos e explicações para que você consiga entender tudo que esta acontecendo.

Código

Neste tópico, vou mostrar pequenos trechos e explicar cada um.

Código para validar a informação buscada(match de informação)

No trecho abaixo, meu objetivo é que haja um match exato da informação que estou passando no campo de busca, então ficará da seguinte maneira:

 cy.getById('<nomedodata-testid>').each(($ele) => {
     if ($ele.text().trim() === <nomedavariavel>) {
          expect($ele.text().trim()).to.equal(<nomedavariavel>);
      }
  });

Explicando o código acima:

Através do data-testid, estou buscando elementos que são idênticos ao nome da variável que informei e logo estou validando para ver se realmente o que busca é o que aparece na tela.

Onde coloquei <nomedavariavel>, você poderá colocar o nome da variável ou colocar diretamente o texto que quer validar dentro de aspas simples.

Código para validar a informação buscada(match parcial)

Já neste trecho, meu objetivo é que haja um match parcial da informação que estou buscando no campo de busca, então ficará da seguinte maneira:

cy.get('<nomedodata-testid>').each(($ele) => {
    if($ele.text().trim().includes(<nomedavariavel>)){
      expect($ele.text().trim()).to.include(<nomedavariavel>)
    }
  });

Código completo do it:

 it('Text search', () => {
    const <nomedavariavel> = 'teste12345';

    cy.typeById('<nomedodata-testid>', <nomedavariavel>);

    cy.getById('<nomedodata-testid>').each(($ele) => {
      if ($ele.text().trim() === <nomedavariavel>) {
          expect($ele.text().trim()).to.equal(<nomedavariavel>);
       }
    });
  });

Neste trecho, criei uma variável, logo em seguida eu busquei o "teste12345" no campo de busca(linha do cy.typeById) e depois fiz a validação como expliquei no tópico acima.

Aqui, eu coloquei uma variável pois vou utilizar esse nome mais vezes no código mas se você não quiser, tudo bem, basta colocar diretamente através de aspas simples.

Referencias

Imagem de rawpixel.com. Freepik. Disponível em: https://br.freepik.com/fotos-gratis/tela-do-sistema-do-mecanismo-de-pesquisa-do-tablet_15559489.htm#query=caixa%20de%20pesquisa&position=0&from_view=search&track=ais Acessado em: 16 de fev. 2023

Stackoverflow. Cypress | check that search keywords match the value of any td of the displayed trs. Disponível em: https://stackoverflow.com/questions/69613032/cypress-check-that-search-keywords-match-the-value-of-any-td-of-the-displayed Acessado em: 16 de fev. 2023