Guia Prático Cypress - Teste Caixas de Seleção

Guia prático para seleção de Elementos

Neste breve tutorial irei mostrar de forma objetivo como selecionarmos alguns elementos de caixa de seleção, e simultaneamente realizar uma breve verificação utilizando o .should()

SELECIONANDO CHECBOXES

Neste código abaixo é demonstrado como realizar uma seleção, bem como, é demonstrado como fazer mais uma seleção.

it('Selecionando CheckBoxes', function () {
      cy.visit('https://rahulshettyacademy.com/AutomationPractice/')
      cy.get('#checkBoxOption1').check().should('be.checked').and('have.value', 'option1') // Método Check é mais especifico para isso
      //Forma de selecionar mais um checkbox de uma vez
      cy.get('input[type="checkbox"]').check(['option2', 'option3'])
  })

Print do teste realizado:

SELECIONANDO DROPDOWNS / AUTOCOMPLETES

Exemplo de uma seleção em dropdown

it('Selecionando Dropdowns', function () {
      cy.visit('https://rahulshettyacademy.com/AutomationPractice/')
      cy.get('select').select('option2').should('have.value', 'option2')

  })

Exemplo de uma seleção em um campo auto completável. Neste bloco de código utilizamos como auxilio o recurso "EACH", onde o mesmo realiza uma iteração dentro da "DIV" em que se encontra os textos e nos retorna um valor, tal valor é verificado através de um "IF" para nos certificarmos de que bate e/ou irá selecionar o texto que buscamos, no caso citado abaixo buscamos o país Índia. O texto Índia é armazenado dentro do "WRAP", que se trata do retorno de uma "PROMISE" (que seria o $el = Índia), e após a "PROMISE" retornada e validada, realizamos um click.

it('Selecionando campos autocompletes dinamicamente', function () {
      cy.visit('https://rahulshettyacademy.com/AutomationPractice/')
      cy.get('#autocomplete').type('ind')
      cy.get('.ui-menu-item div').each(($el, index, $list) => {
          if ($el.text() === 'India') {
              cy.wrap($el).click()
          }
      })

  })

Print do teste realizado (Autocomplete)

SELECIONANDO RADIO BUTTONS

Neste bloco de código fazemos também uma verificação opcional, ao selecionarmos um campo, podemos verificar se os outros estão desmarcados.

it('Selecionado radioButtons', function () {
      cy.visit('https://rahulshettyacademy.com/AutomationPractice/')
      cy.get('input[value="radio2"]').check().should('be.checked')
      cy.get('input[value="radio1"]').should('not.be.checked')
  })

Print do teste realizado

EXTRA: VERIFICANDO CAMPOS QUE SE OCULTAM

Neste bloco de código demonstro um dos muitos desafios que é possível de encontrarmos em testes front end, itens que se ocultam. Neste caso em especifico é importante que façamos uma verificação com o uso do "SHOULD" para que o teste avance até o final. No caso desse teste, temos o auxilio de uma botão que realiza a ocultamento do campo de texto.

it('Localizando recursos que são ocultados', function () {
      cy.visit('https://rahulshettyacademy.com/AutomationPractice/')
      cy.get('#displayed-text').should('be.visible')
      cy.get('#hide-textbox').click()
      cy.get('#displayed-text').should('not.be.visible')
      cy.get('#show-textbox').click()
  })

Print do teste realizado

CONCLUSÃO

Apesar de muito simples esses testes, eles são um pontapé inicial para testar as funcionalidades de um site, sendo que outros testes podem ser incorporados, principalmente se a aplicação possuir um banco de dados integrado, ou os campos de texto não aceitarem caracteres especiais.