Guia Completo da Estratégia de Carregamento de Página do Selenium

A automação de páginas web tem crescido extensivamente, e a maioria de nós já trabalhou com ela. É algo em que trabalhamos quase regularmente, automatizando vários cenários e navegando por muitas páginas da web.

Mas você já se perguntou o que acontece nos bastidores quando uma página é carregada no Selenium WebDriver? Conhecemos algumas funções do WebDriver usadas para navegar até uma página, como get() e navigate(), mas elas definem como uma página é carregada, ou há alguma outra funcionalidade em jogo no backend das coisas?

A resposta a isso é SIM! É definido por algo chamado de Estratégia de Carregamento de Página no Selenium WebDriver. O WebDriver usa a Estratégia de Carregamento de Página para determinar como a página será carregada antes de prosseguir com interações adicionais; para executar as próximas ações.

Neste blog sobre a Estratégia de Carregamento de Página do Selenium, vamos dar uma olhada mais profunda nessa estratégia e tentar entender seus diferentes tipos e como podem ser implementados no código de automação.

Então, vamos começar!

O que é a Estratégia de Carregamento de Página?

A Estratégia de Carregamento de Página define quando a página seria considerada carregada para a sessão atual sempre que o código de automação inicia um navegador e usa o método get() ou navigate().to(). Por padrão, o Selenium WebDriver usa a Estratégia de Carregamento de Página padrão, que é NORMAL. Isso significa esperar até que toda a página e seus componentes, como CSS, imagens, frames, etc., sejam carregados.

Se a página demorar mais para carregar devido aos componentes mencionados acima (ou condições de rede limitadas) e não for importante para o seu script, você pode alterá-la para EAGER ou NONE para acelerar a execução. Este valor se aplica a toda a sessão, então escolha com sabedoria para o seu projeto, caso contrário, pode levar a instabilidade nos testes.

O uso da Estratégia de Carregamento de Página foi introduzido como parte das funcionalidades do Selenium 4. Ao contrário das versões anteriores, ele remove a dependência de usar tempos limite padrão para carregamento de páginas.

Como Funciona a Estratégia de Carregamento de Página?

Para determinar se o carregamento da página foi concluído ou não, o Selenium usa a propriedade document.readyState. O document.readyState descreve o estado de carregamento do documento. Um documento aqui refere-se a qualquer página da web que é carregada no navegador.

O método Ready State do Documento é suportado por todos os navegadores, tornando-o uma opção confiável para uso com a Estratégia de Carregamento de Página do Selenium.

Assim como temos a Estratégia de Carregamento de Página padrão, o document.readyState padrão para o qual o Selenium WebDriver espera é Complete.

A propriedade readyState de um objeto de documento do navegador representa o estado atual do processo de carregamento da página. A propriedade pode ter um dos seguintes valores:

• loading – A página ainda está carregando.
• interactive – A página terminou de carregar, mas recursos subordinados como imagens, folhas de estilo e frames ainda podem estar carregando.
• complete – A página e todos os recursos subordinados terminaram de carregar.

Você pode usar a propriedade readyState para determinar quando uma página foi totalmente carregada e está pronta para ser manipulada por JavaScript ou outros meios. Por exemplo, no Selenium, você pode usar a propriedade readyState para determinar quando uma página foi carregada e os elementos na página podem ser interagidos usando comandos do Selenium.

Antes de avançarmos, vamos entender um pouco mais sobre o readyState do documento com um exercício curto.

1. Navegue até o site. 
2. Depois que o site for carregado, clique com o botão direito -> clique em Inspeccionar -> abra o console e execute o comando document.readyState.

3. Como resultado deste comando, você veria a saída como completa, que é o estado atual do documento. Isso significa que toda a página foi carregada com os recursos necessários (ou seja, imagens, CSS, etc.).

4. Em seguida, atualize a página e pressione enter novamente no comando acima. Você poderá ver o estado de carregamento do documento neste momento, como abaixo.

Se você não conseguir ver o estado de carregamento após 4-5 atualizações, tente limitar as condições da Internet definindo a Rede para opções mais lentas. Você pode aprender mais sobre isso através deste blog sobre testar sites em diferentes condições de rede. Também usaremos a mesma abordagem na demonstração.

Então isso mostra como document.readyState funciona na prática. Você também pode verificar o desempenho do site em diferentes condições de rede usando o LT Browser, uma ferramenta de teste amigável para dispositivos móveis. O LT Browser é uma ferramenta complementar oferecida pela LambdaTest, que permite testar a responsividade do seu site em mais de 50 dispositivos diferentes, incluindo smartphones, tablets e laptops. Também oferece a capacidade de criar resoluções personalizadas, simular diferentes condições de rede e gerar relatórios de desempenho usando o Google Lighthouse. 

Vamos avançar para entender esses valores e como eles são mapeados com valores de PageLoadStrategy.

Mapeamento PageLoadStrategy <> document.readyState

O readyState do documento pode ser um dos seguintes:

• Carregando: O carregamento do documento está em andamento.
• Interativo: O documento foi carregado e analisado, mas os recursos secundários como scripts, imagens, CSS e frames ainda estão carregando. Neste ponto, o evento DOMContentLoaded é disparado.
• Completo: Documento e todos os recursos secundários terminaram de carregar. Isso indica o disparo do evento load.

Cada PageLoadStrategy é mapeado para um valor específico de document.readyState, com base no qual o WebDriver completará o método de navegação e continuará executando as próximas etapas.

Tipos de Estratégias de Carregamento de Página no Selenium

Existem basicamente três tipos de Estratégias de Carregamento de Página do Selenium que podem ser usadas na automação web.

NORMAL (Padrão, Se Não Especificado)

Essa estratégia de carregamento de página do Selenium faz com que o WebDriver aguarde até que o carregamento da página seja concluído, ou seja, o evento de carregamento seja disparado.

O evento de carregamento é disparado quando a página foi carregada, incluindo os recursos dependentes, como CSS, JavaScript, iFrames e imagens.

Ele aguarda que o conteúdo HTML seja baixado e analisado junto com todos os subrecursos.

ANSIOSO

Com essa estratégia de carregamento de página do Selenium, o WebDriver aguarda apenas até que a página inicial seja carregada e o evento DOMContentLoaded seja disparado.

Ao contrário do evento de carregamento, o evento DOMContentLoaded é disparado assim que o DOM é carregado sem esperar que recursos adicionais como CSS, JavaScript, iFrames e imagens sejam carregados.

Ele aguarda apenas que o conteúdo HTML seja baixado e analisado.

NENHUM

Nessa estratégia de carregamento de página do Selenium, o WebDriver não é bloqueado e continua com a execução do teste.

Ele aguarda apenas que o conteúdo HTML seja baixado.

Demonstração: Configuração do WebDriver com diferentes estratégias de carregamento de página do Selenium

Agora que desenvolvemos um entendimento básico de diferentes estratégias de carregamento de página do Selenium, vamos analisar exemplos de código para entender como é implementado.

Para fazer o mesmo, escreveremos um script de teste automatizado para o seguinte cenário.

1. Crie uma instância do RemoteWebDriver usando o Selenium Grid baseado em nuvem. Para isso, estaremos usando o plataforma LambdaTest.
2. Defina as capacidades do WebDriver para uma estratégia de PageLoadStrategy específica.
3. Em seguida, use o driver para iniciar o navegador e navegar aqui.
4. Para isso, vamos anotar a duração do tempo em que a página é carregada para ver como isso varia para diferentes Estratégias de Carregamento de Páginas do Selenium sob as mesmas condições. As diferenças no tempo de carregamento da página ajudarão a obter mais clareza sobre todas as estratégias.

Configuração do Projeto

Para este blog sobre a Estratégia de Carregamento de Páginas do Selenium, será usado o projeto Maven com Java no Eclipse IDE. Se você não é fã do Eclipse, use qualquer IDE de sua preferência e execute os mesmos passos. Ele usará as dependências do Selenium WebDriver e do TestNG para automatizar a interação com os elementos da página e a execução dos casos de teste. É altamente recomendável usar as versões estáveis mais recentes para melhores resultados.

Vamos começar agora.

1. Inicie o Eclipse ou a IDE de sua preferência.
2. Crie um novo projeto Maven e nomeie-o PageLoadStrategy.
3. Dentro da pasta src, adicione um pacote de teste e dentro dele uma classe de teste e nomeie-a como TestPageLoadStrategy. Esta classe conterá todo o código para esta demonstração.

4. Atualize o arquivo pom.xml para ter as dependências mais recentes para usar o TestNG no Selenium, como mostrado abaixo, antes de escrever o caso de teste real.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
 <modelVersion>4.0.0</modelVersion>
 <groupId>PageLoadStrategy</groupId>
 <artifactId>PageLoadStrategy</artifactId>
 <version>0.0.1-SNAPSHOT</version>
 <build>
   <sourceDirectory>src</sourceDirectory>
   <plugins>
     <plugin>
       <artifactId>maven-compiler-plugin</artifactId>
       <version>3.8.1</version>
       <configuration>
         <release>16</release>
       </configuration>
     </plugin>
   </plugins>
 </build>
 <dependencies>
   <dependency>
       <groupId>org.seleniumhq.selenium</groupId>
       <artifactId>selenium-java</artifactId>
       <version>4.6.0</version>
   </dependency>
   <dependency>
       <groupId>org.testng</groupId>
       <artifactId>testng</artifactId>
       <version>7.7.0</version>
       <scope>test</scope>
   </dependency>
 </dependencies>
</project>

package test;


import java.net.MalformedURLException;
import java.net.URL;
import java.time.*;
import java.util.HashMap;
import org.openqa.selenium.PageLoadStrategy;
import org.openqa.selenium.chrome.ChromeOptions;
import org.openqa.selenium.remote.RemoteWebDriver;
import org.testng.annotations.Test;


public class TestPageLoadStrategy {


   public RemoteWebDriver driver = null;
   String username = "";
   String accessKey = "";
 
  ChromeOptions chromeOptions = new ChromeOptions();
   HashMap ltOptions = new HashMap();


   private void setup(String buildName) {


       chromeOptions.setPlatformName("Windows 10");
       chromeOptions.setBrowserVersion("108.0");


       ltOptions.put("project", "Page Load Strategy");
       ltOptions.put("selenium_version", "4.0.0");
       ltOptions.put("w3c", true);
       ltOptions.put("networkThrottling", "Regular 2G");
       ltOptions.put("build", buildName);
   }


   private void checkPageLoad() {
       try {
           driver = new RemoteWebDriver(
                   new URL("https://" + username + ":" + accessKey + "@hub.lambdatest.com/wd/hub"), chromeOptions);


           Instant startTime = Instant.now();
           System.out.println("Page load started at : " + startTime.toString());
           
           System.out.println("Navigating to the URL");
           driver.get("https://ecommerce-playground.lambdatest.io/");
          
           Instant endTime = Instant.now();
           System.out.println("Page load ended at : " + endTime.toString());


           Duration duration = Duration.between(startTime, endTime);
           System.out.println("Total PageLoad time : " + duration.toMillis() + " milli seconds");
       } catch (MalformedURLException e) {
           System.out.println("Invalid grid URL");
       } finally {
           driver.quit();
       }
   }


   @Test
   public void testNormalStrategy() {
       // Para definir PageLoadStrategy = Normal
       setup("Page Load Strategy - Normal");


       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NORMAL);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testEagerStrategy() {
       // Para definir PageLoadStrategy = Eager
       setup("Page Load Strategy - Eager");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.EAGER);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }


   @Test
   public void testNoneStrategy() {
       // Para definir PageLoadStrategy = None
       setup("Page Load Strategy - None");
       chromeOptions.setPageLoadStrategy(PageLoadStrategy.NONE);
       chromeOptions.setCapability("LT:Options", ltOptions);
       checkPageLoad();
   }
}

Usar o Grid Selenium Cloud proporciona maior escalabilidade e velocidade para testes automatizados em Java e permite que os usuários realizem testes paralelos e de cross-browser extensivos em várias combinações de OS e navegadores. 

Passo 2. Como mencionado no passo anterior, já que estamos usando a plataforma LambdaTest, precisamos fornecer o nome de usuário e a chave de acesso para nosso usuário se conectar com o hub cloud. Você pode encontrar essas informações na seção de Perfil do LambdaTest após a criação de sua conta.

Passo 3. Crie um objeto da classe ChromeOptions. Essa classe é usada para manipular várias propriedades do driver do Chrome, que utilizaremos para execução. Este objeto chromeOptions será usado em cada caso de teste para definir a PageLoadStrategy e, em seguida, será passado para o WebDriver.

Passo 4. Crie uma variável HashMap e nomeie-a como ltOptions. Isso configurará várias propriedades para a execução da grade de nuvem LambdaTest.

Passo 5. Em seguida, está o método setup(), usado para definir algumas propriedades básicas em chromeOptions e ltOptions. Essas são as propriedades comuns de todos os três casos de PageLoadStrategy.

Além disso, observe que estamos usando a propriedade networkThrottling do LambdaTest para definir a rede como Regular 2G com velocidade de download de 250 Kbps e velocidade de upload de 50 Kbps. Isso ajudará a demonstrar melhor o tempo de carregamento em todas as situações, como discutido na seção anterior.

Usar a plataforma LambdaTest oferece essa vantagem onde você pode selecionar diretamente os detalhes do navegador e da versão, e suas capacidades são geradas automaticamente usando o Gerador de Capacidades do LambdaTest. Você só precisa adicioná-las ao código.

Este método recebe um parâmetro, buildName. Esse parâmetro é usado para exibir o nome do build.

Passo 6. Adicione uma nova função, checkPageLoad(). No bloco try, escrevemos o código para conectar-se com o RemoteWebDriver na plataforma LambdaTest usando as propriedades definidas em chromeOptions.

Após a conexão ser estabelecida, é criado um objeto da classe Instant do pacote java.time para armazenar e registrar o horário de início quando estamos prestes a lançar o navegador e começar a navegar. Isso é seguido por um driver chamado ao navegador e o lançamento do site de teste.

Assim que o site é considerado carregado, dependendo da estratégia de PageLoad definida, o driver passa o controle para o próximo comando, que é novamente um objeto da classe Instant, para obter o horário atual novamente, o horário de término.

Neste ponto, a página está carregada de acordo com a estratégia solicitada, e temos os horários de início e término. O tempo necessário para carregar uma página da web em milissegundos pode ser determinado descobrindo a diferença entre dois pontos. A classe Duration, que faz parte do mesmo pacote, é usada para realizar isso.

Você notará que este tempo de carregamento difere em todos os nossos casos de teste para diferentes estratégias.

A catch block is added next for the try block to handle the exception if it occurs. MalformedURLException is to catch the exception in case our RemoteWebDriver URL has invalid syntax. Once everything is done, we finally close the driver instance. To learn more about it, you can go through this blog on the most common exceptions in Selenium.

testNormalStrategy()

Este é o caso de teste para demonstrar a estratégia Normal.

Primeiro, o método setup() define propriedades básicas para o navegador e a plataforma LambdaTest. Em seguida, o valor para PageLoadStrategy é definido como NORMAL aqui nas chromeOptions, seguido por definição de outras capacidades.

Finalmente, o método checkPageLoad() é chamado para carregar a página da web e registrar o tempo de carregamento, que compararemos para cada estratégia na seção de execução.

testEagerStrategy()

Este é o caso de teste para demonstrar a estratégia Eager.

Todos os passos, neste caso, são semelhantes ao anterior. A única diferença é que o valor para PageLoadStrategy é definido como EAGER aqui nas chromeOptions, seguido da chamada do método checkPageLoad().

testNoneStrategy()

Este é o caso de teste para demonstrar a estratégia None.

O valor para PageLoadStrategy é definido como NONE aqui nas chromeOptions, e o resto dos passos é semelhante aos casos de teste anteriormente discutidos.

Execução do Teste

Tendo entendido o funcionamento e a implementação de todas as PageLoadStrategy, vamos agora executar o código e ver os resultados da execução localmente e no Painel do LambdaTest.

O caso de teste será executado usando TestNG. Para executar, siga os passos mencionados abaixo:

1. Clique com o botão direito no nome do caso de teste no Eclipse IDE.
2. Vá para Executar Teste e selecione Teste TestNG para iniciar a execução.

Vamos executar os casos um por um e ver se o tempo de carregamento varia para cada estratégia.

Estratégia NORMAL

Você pode notar que o tempo TotalPageLoad, neste caso, é de 70852 milissegundos, pois estamos usando uma rede com velocidade Regular 2G. Foi estabelecido que o valor mais alto deve estar entre os três casos. Como estabelecido até agora, deve ser o mais alto entre todos os três. Podemos verificar isso executando os casos para Eager e None e comparando-os.

Estratégia EAGER

Como esperado, o PageLoadTime, ou seja, 70231 milissegundos, para a estratégia Eager no mesmo cenário é comparativamente menor que a Normal.

Estratégia NONE

Você pode observar aqui que o PageLoadTime para a estratégia None é significativamente menor do que as outras duas, pois não aguarda que nenhum recurso seja baixado.

Aqui está um resumo rápido dos tempos de carregamento da página em diferentes estratégias

Você também pode visualizar os resultados da execução navegando até o Painel do LambdaTest conforme mostrado abaixo para cada PageLoadStrategy:

Você pode navegar até a seção Builds em Automation para visualizar detalhes do seu build de automação.

Detalhes do build para PageLoadStrategy.NORMAL:

Detalhes do build para PageLoadStrategy.EAGER:

Detalhes do build para PageLoadStrategy.NONE:

Conclusão

Com isso, chegamos ao fim deste tutorial Selenium TestNG sobre diferentes Estratégias de Carregamento de Página no Selenium WebDriver. Neste, aprendemos sobre o uso adicional e o funcionamento dessas Estratégias de Carregamento de Página do Selenium e como podemos integrá-las no script de automação e executá-las na Grade de Nuvem do Selenium.

I hope now you can implement these in your use cases more efficiently.

Happy Loading!!