Número8 muito próprio Derick Arzu foi recentemente publicado em Médio. Leia o artigo sobre processos automatizados de controle de qualidade abaixo.

Caixas de texto, caixas de seleção, botões de opção e outros elementos de formulários são bastante simples de lidar quando se trata de desenvolver testes funcionais de UI para um aplicativo da Web. Mas o que acontece quando você quer escrever um teste que verifique se a interface do usuário de um calendário da Web está funcionando?

Você provavelmente está pensando que isso pode ser feito facilmente com alguns cliques e validações, o que não é apenas verdade, mas também a abordagem que levou à ideia de um manipulador.

Antes de descobrir como deixar sua equipe de controle de qualidade automatizado muito feliz, aqui estão alguns motivos pelos quais escrever uma função simples ou apenas um segmento de código que lida com UM calendário específico não é tão dimensionável. Imagine que você é um desenvolvedor de controle de qualidade em uma empresa que está desenvolvendo os sites das companhias aéreas A e B e sua equipe é solicitada a criar os conjuntos de testes automatizados. Parece muito fácil, você usará o mesmo código em ambos os projetos, nada precisará ser alterado; até que alguém lhe mostre os designs dos dois calendários da Web que cada companhia aérea usa em seu site.

Começando com as diferenças óbvias, a companhia aérea A usa duas janelas, enquanto a companhia aérea B usa apenas uma; isso certamente representa uma mudança significativa no código dessa primeira abordagem. Outra diferença que talvez você não tenha notado é que a companhia aérea B tem um menu suspenso para alterar o ano do calendário, o que significaria uma pequena alteração no método usado para obter o texto do ano exibido. Esses são dois visual diferenças que afetarão a maneira como seu bot interage com o calendário e o DOM certamente o surpreenderão com mais.

Agora que você está interessado, a codificação começa!

Esse manipulador foi implementado no Node.js e usa o WebdriverIO como a estrutura de teste que interage com o navegador.

Você descobrirá que a estrutura tem duas funções ($ e $$) para buscar elementos da Web. No entanto, será criada uma hierarquia de classes para manipular os elementos. Mais adiante, você aprenderá que isso é para que o manipulador possa abranger facilmente muitos designs de calendário da Web.

A classe principal é a Element. É aqui que o método para obter a função fetch é implementado e tem dois parâmetros:

1. selectorObject (obrigatório), que se refere a um objeto com duas propriedades; a primeira, denominada selector, é uma cadeia de caracteres que especifica o seletor que será usado para buscar o elemento. A segunda é index, que é um número inteiro que deve ser atribuído ao objeto se o resultado da busca quiser ser tratado como um único elemento e não como uma matriz de elementos.
2. additionalProperties (opcional) é um objeto com qualquer propriedade que queira ser adicionada ao resultado da busca. As subclasses da hierarquia usam isso para gerenciar como alguns dados são obtidos dos elementos da Web; você aprenderá isso mais tarde.

Leia mais...