how use firebug creating selenium scripts selenium tutorial 4
No tutorial anterior , aprendemos como criar scripts de teste automatizados usando Selenium IDE e seu recurso de gravação. Nós também folheamos populosa recursos do Selenium IDE . Nosso objetivo era trazer ao leitor os recursos e comandos mais importantes do Selenium IDE.
Apenas um lembrete - este é o nosso 4º tutorial gratuitamente Selenium training series .
Agora que você está acostumado e é capaz de criar scripts automatizados usando o modo de gravação do Selenium IDE, vamos prosseguir com outra ferramenta que desempenha um papel muito importante nos auxiliando a criar scripts de teste eficazes, conhecido como “Firebug”. O Firebug nos ajuda a inspecionar as propriedades de elementos e páginas da web.
Assim, este tutorial é composto pela instalação do Firebug e sua usabilidade.
Observe que o conteúdo deste tutorial não é aplicável apenas no contexto do Selenium IDE; em vez disso, pode ser aplicado a cada uma das ferramentas do pacote Selenium. Portanto, eu preferencialmente usaria o termo Selênio em vez de Selênio IDE.
Neste tutorial, vamos aprender como usar o add-on Firebug para criar scripts Selenium. No processo, também aprenderemos como instalar o Firebug.
O que você aprenderá:
- Introdução ao Firebug
- Como instalar o Firebug?
- Criando Selenium Script usando Firebug
- Conclusão
- Leitura recomendada
Introdução ao Firebug
Firebug é um complemento do Mozilla Firefox. Esta ferramenta nos ajuda a identificar ou inspecionar mais especificamente os elementos HTML, CSS e JavaScript em uma página da web. Isso nos ajuda a identificar os elementos exclusivamente em uma página da web. Os elementos podem ser encontrados exclusivamente com base em seus tipos de localizador, que discutiremos posteriormente neste tutorial.
Como instalar o Firebug?
Para facilitar o entendimento, dividiríamos o processo de instalação nas etapas a seguir.
Passo 1: Inicie o navegador Mozilla Firefox e navegue até este Página de download do complemento Firebug . O URL nos leva à seção de complementos do Firefox.
Passo 2: Clique no botão “Adicionar ao Firefox” presente na página web. Consulte a figura a seguir para o mesmo.
Etapa 3: Assim que clicarmos no botão “Adicionar ao Firefox”, uma caixa de alerta de segurança aparecerá, clique no botão “Permitir” agora.
Passo 4: Agora o Firefox baixa o add-on no pano de fundo e uma barra de progresso é exibida.
Etapa 5: Assim que o processo for concluído, a janela de instalação do software será exibida. Agora clique no botão “Instalar agora”.
Etapa 6: Assim que a instalação for concluída, um pop-up aparecerá dizendo que o firebug foi instalado com sucesso. Agora escolha fechar este pop-up.
Observação : Ao contrário do Selenium IDE, não precisamos reiniciar o Firefox para refletir a instalação do firebug, em vez disso, ele vem prontamente.
Etapa 7: Agora, para iniciar o firebug, podemos optar por uma das seguintes maneiras:
- Pressione F12
- Clique no ícone Firebug presente no canto superior direito da janela do Firefox.
-
- Clique na barra de menu do Firefox -> Desenvolvedor Web -> firebug -> Abrir Firebug.
Etapa 8 : Agora, o firebug pode ser visto na parte inferior da janela do Firefox.
Agora que baixamos e instalamos o firebug, vamos seguir em frente com os tipos de localizadores que criaríamos usando o firebug.
Criando Selenium Script usando Firebug
Ao contrário do Selenium IDE, no Firebug, criamos scripts de teste automatizados manualmente, adicionando várias etapas de teste para formar um script de teste lógico e consistente.
Vamos seguir uma abordagem progressiva e entender o processo passo a passo.
Cenário:
- Abra “https://accounts.google.com”.
- Afirme o título do aplicativo
- Insira um nome de usuário e uma senha inválidos e envie os detalhes para fazer o login.
Passo 1 - Inicie o Firefox e abra Selenium IDE na barra de menus.
Passo 2 - Digite o endereço do aplicativo em teste (“https://accounts.google.com”) dentro da caixa de texto URL base.
Etapa 3 - Por padrão, o botão Gravar está no estado LIGADO. Lembre-se de ajustá-lo no estado OFF para desabilitar o modo de gravação. Observe que se o modo de gravação estiver no estado LIGADO, isso pode resultar na gravação de nossas interações com o navegador da web.
Passo 4 - Abra o aplicativo em teste (https://accounts.google.com) no Firefox.
Etapa 5 - Inicie o Firebug no navegador da web.
Etapa 6 - Selecione a etapa de teste vazia no Editor.
Etapa 7 - Digite “abrir” na caixa de texto do comando presente no Painel do Editor. O comando “abrir” abre o URL especificado no navegador da web.
Recomendação: ao digitar comandos na caixa de texto do comando, o usuário pode aproveitar o recurso de seleção automática. Assim, assim que o usuário digitar uma sequência de caracteres, as sugestões correspondentes serão preenchidas automaticamente.
O usuário também pode clicar no menu suspenso disponível na caixa de texto do comando para ver todos os comandos fornecidos pelo Selenium IDE.
Etapa 8 - Agora, vá em direção à seção Firebug no navegador da web, expanda a seção “head” do código HTML. Observe a marca HTML. Portanto, para afirmar o título da página da web, exigiríamos o valor da tag.
Copie o título da página da web que é “Login - Contas do Google” em nosso caso.
Etapa 9 - Selecione a segunda etapa de teste vazia no Editor.
Etapa 10 - Digite “assertTitle” na caixa de texto do comando presente no Painel do Editor. O comando “assertTitle” retorna o título da página atual e o compara com o título especificado.
c # perguntas e respostas da entrevista para caloiros
Etapa 11 - Cole o título copiado na etapa 8 no campo Destino do segundo.
Etapa 12 - Agora selecione a terceira etapa de teste vazia no Painel do Editor
Etapa 13 - Digite o comando “digite” na caixa de texto do comando. O comando “type” insere um valor no elemento da web especificado na GUI.
Etapa 14 - Agora mude para o navegador da web, leve o cursor do mouse até a caixa de texto “E-mail” dentro do formulário de login e pressione um clique com o botão direito.
Escolha a opção “Inspecionar elemento com Firebug”. Observe que o Firebug destaca automaticamente o código HTML correspondente para o elemento da web, ou seja, “Caixa de texto de e-mail”.
Etapa 15 - O código HTML na ilustração acima manifesta os atributos de propriedade distintos pertencentes à caixa de texto “Email”. Observe que há quatro propriedades (ID, tipo, espaço reservado e nome) que identificam exclusivamente o elemento da web na página da web. Assim, cabe ao usuário escolher uma ou mais propriedades para identificar o elemento da web.
Assim, neste caso, escolhemos o ID como localizador. Copie o valor de ID e cole-o no campo Destino da terceira etapa do teste prefixado com “id =” para indicar Selenium IDE para localizar um elemento da web com ID como “Email”.
(Clique para ver a imagem ampliada)
Observe que o Selenium IDE faz distinção entre maiúsculas e minúsculas, portanto, digite o valor do atributo com cuidado e precisamente da mesma forma que é exibido no código HTML.
Etapa 16 - Clique no botão Localizar para verificar se o localizador selecionado encontra e localiza o elemento de IU designado na página da web.
Etapa 17 - Agora, a próxima etapa é inserir os dados de teste na caixa de texto Valor da terceira etapa de teste no Painel do Editor. Digite “InvalidEmailID” na caixa de texto Valor. O usuário pode alterar os dados de teste como e quando desejar.
Etapa 18 - Agora selecione a quarta etapa de teste vazia no Painel do Editor
Etapa 19 - Digite o comando “digite” na caixa de texto do comando.
Etapa 20 - Agora mude para o navegador da web, coloque o cursor do mouse na caixa de texto “Senha” dentro do formulário de login e pressione um clique com o botão direito.
Escolha a opção “Inspecionar elemento com Firebug”.
Etapa 21 - O código HTML abaixo manifesta os atributos de propriedade distintos pertencentes à caixa de texto “Senha”. Observe que há quatro propriedades (ID, tipo, espaço reservado e nome) que identificam exclusivamente o elemento da web na página da web. Assim, cabe ao usuário escolher uma ou mais propriedades para identificar o elemento da web.
Assim, neste caso, escolhemos o ID como localizador. Copie o valor do ID e cole-o no campo Destino da terceira etapa do teste prefixado com “id =”.
(Clique para ver a imagem ampliada)
Etapa 22 - Clique no botão Localizar para verificar se o localizador com guias encontra e localiza o elemento de interface do usuário designado na página da web.
Etapa 23 - Agora, a próxima etapa é inserir os dados de teste na caixa de texto Valor da quarta etapa de teste no Painel do Editor. Digite “InvalidPassword” na caixa de texto Valor. O usuário pode alterar os dados de teste como e quando desejar.
Etapa 24 - Agora selecione a quinta etapa de teste vazia no Painel do Editor
Etapa 25 - Digite o comando “clique” na caixa de texto do comando. O comando “click” clica em um elemento da web especificado dentro da página da web.
Etapa 26 - Agora mude para o navegador da web, leve o cursor do mouse até o botão “Sign in” dentro do formulário de login e pressione um clique direito.
Escolha a opção “Inspecionar elemento com Firebug”.
Etapa 27 - O código HTML abaixo manifesta os atributos de propriedade distintos pertencentes ao botão “Sign in”.
Escolha ID como o localizador. Copie o valor do ID e cole-o no campo Destino da terceira etapa do teste prefixado com “id =”.
(Clique para ver a imagem ampliada)
Etapa 28 - Clique no botão Localizar para verificar se o localizador escolhido encontra e localiza o elemento de IU designado na página da web.
O script de teste está concluído agora. Consulte a ilustração a seguir para visualizar o script de teste concluído.
Etapa 29 - Reproduza o script de teste criado e salve-o da mesma forma que fizemos no tutorial anterior.
Conclusão
Neste tutorial, apresentamos outra ferramenta de criação de script, ou melhor, uma ferramenta que auxilia na criação de script.
Surpreendentemente, o Firebug tem um grande potencial para localizar elementos da web em uma página da web. Assim, o usuário pode aproveitar os recursos da ferramenta na criação de scripts de teste de automação eficazes e eficientes manualmente.
Próximo tutorial nº 5 : Seguindo em frente no próximo tutorial, daríamos uma olhada no vários tipos de localizadores no Selenium e sua técnica de acessibilidade para construir scripts de teste . Nesse ínterim, o leitor pode começar a construir seus scripts de teste de automação usando Firebug.
Você usou o Firebug para inspecionar elementos HTML ou para criar scripts? Você acha isso útil? Por favor, compartilhe sua experiência nos comentários
Leitura recomendada
- Como usar o framework TestNG para criar scripts do Selenium - Tutorial # 12 do TestNG Selenium
- Tutorial Cucumber Selenium: Cucumber Java Selenium WebDriver Integration
- Como localizar elementos em navegadores Chrome e IE para construir scripts do Selenium - Tutorial do Selenium nº 7
- Criando Genéricos e Conjuntos de Testes - Tutorial do Selenium nº 22
- Introdução ao Selenium WebDriver - Selenium Tutorial # 8
- Integração do Jenkins com o Selenium WebDriver: tutorial passo a passo
- Tutoriais detalhados do Eclipse para iniciantes
- Scripts Eficientes do Selenium e Cenários de Solução de Problemas - Tutorial # 27 do Selenium