Como entender que o seletor não é otimizado?#

Para um mesmo elemento da interface web, é possível escolher muitos seletores diferentes, todos os quais funcionarão em maior ou menor grau. Por exemplo, no cliente web do WhatsApp, o seletor

#main > footer > div._2lSWV._3cjY2.copyable-area > div > span:nth-child(2) > div > div._1VZX7 > div._2xy_p._3XKXx > button

e o seletor

button[aria-label="Enviar"]

representarão o mesmo controle – o botão "Enviar". E ambos funcionarão no momento. O primeiro seletor baseia-se em um longo caminho desde o início (elemento raiz) da página web até o elemento de controle específico "para baixo" na árvore de hierarquia dos elementos de controle. O segundo seletor baseia-se no tipo da tag do elemento de controle e em um atributo característico dessa tag. Apesar de ambos os seletores funcionarem corretamente no momento da escrita, o primeiro seletor tem uma probabilidade muito maior de "quebrar", ou seja, parar de funcionar, a cada atualização do aplicativo web ou do site. Por exemplo, elementos de controle intermediários podem aparecer ou desaparecer ao longo do caminho do seletor, e, consequentemente, o próprio caminho do elemento raiz até o que precisamos mudará.

Além disso, se o seletor contiver combinações pseudoaleatórias de letras e números (como 1VZX7 ou 3XKXx no exemplo acima), isso é um sinal de um seletor potencialmente instável. Por exemplo, essa combinação de letras e números pode mudar a cada acesso do usuário ao site, e para outro usuário, ela já será diferente. Isso pode ser verificado ao sair do site, fechar o navegador, abri-lo novamente e voltar à página desejada, ou simplesmente acessando essa página de outro computador ou navegador e verificando se as mesmas letras e números aparecem nesse ponto do seletor ou se já são outros. Além disso, pode ajudar (mas nem sempre) a combinação Ctrl+F5, que provoca um recarregamento completo da página. Mas, mesmo que após todas essas ações, a combinação de letras e números não tenha mudado, ela pode mudar após a próxima construção (atualização) do site ou serviço web, pois frameworks modernos de sites (como Angular, React, etc.) podem gerar esses nomes de classes aleatoriamente a cada reconstrução da página.

Assim, para que o robô em produção funcione de forma confiável, e o desenvolvedor não precise corrigir os seletores com muita frequência nos blocos de automação de navegadores, é muito importante, na fase de desenvolvimento, escolher um seletor o mais estável possível. Nem sempre, mas muito frequentemente, o seletor mais estável é o mais curto de todos os possíveis para esse elemento.

Se a ferramenta de gravação não fornecer um seletor suficientemente estável, ele deve ser escolhido ou editado manualmente. Para isso, é necessário conhecer a notação dos seletores CSS.