O Chrome DevTools para agentes permite que seu agente verifique layouts responsivos, teste APIs com reconhecimento de localização e simule velocidades variadas de CPU ou rede. Use essas ferramentas para identificar casos extremos e automatizar auditorias de desempenho de forma mais eficaz.
Esses recursos de emulação funcionam com outras ferramentas que permitem que seu agente interaja com seu site, como clicar em elementos, preencher formulários e navegar pelas páginas.
As coisas que você pode emular incluem:
- Janela de visualização e user agent: Emule tamanhos de tela e identificadores de dispositivos específicos.
- Geolocalização:falsifique coordenadas de localização para testar APIs com reconhecimento de localização.
- Rede e CPU:limite as condições de rede e a velocidade da CPU para simular restrições de desempenho do mundo real.
- Esquema de cores:alterne entre os modos claro e escuro.
Ao usar a emulação, tenha em mente o seguinte:
- Suporte a dispositivos: seu agente pode emular qualquer dispositivo na lista Puppeteer's
KnownDevices. Isso inclui a simulação de eventos de toque para janelas de visualização em dispositivos móveis. - Comportamento do mecanismo do navegador: embora a ferramenta emule as características do dispositivo, ela não simula mecanismos de navegador não Chromium ou sistemas operacionais diferentes. Seu agente sempre é executado no Chrome no sistema operacional atual.
Casos de uso para emulação de usuários
Instrua seu agente a emular ambientes e verificar a interface para você, em vez de redimensionar manualmente os navegadores, falsificar IPs ou limitar redes após cada mudança de código.
Integre a emulação ao processo de desenvolvimento com esses fluxos de trabalho.
Iterar no design responsivo
Os padrões de navegação geralmente mudam drasticamente entre fatores de forma para dispositivos móveis e computadores. Ao criar o aplicativo, você pode instruir seu agente a verificar se os componentes que ele acabou de escrever são renderizados corretamente e fornecem o mesmo conteúdo em todos os dispositivos.
Exemplo de comando:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
Exemplo de execução do agente:seu agente abre uma janela do Chrome, navega até a página, inicia a emulação e compara itens nas duas janelas de visualização. Ele confirma que a versão para dispositivos móveis (menu hambúrguer) e a versão para computadores (cabeçalho) contêm os links esperados.
Validar interações entre janelas de visualização
Os layouts são interrompidos durante as interações, não apenas no CSS. As capturas de tela estáticas geralmente perdem bugs que acontecem quando os usuários realmente tocam na interface. Você pode atribuir ao seu agente a tarefa de testar fluxos de interação específicos em várias janelas de visualização para detectar bugs funcionais ocultos.
Exemplo de comando:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
Exemplo de execução do agente:seu agente digita uma consulta de pesquisa e redimensiona a tela para cada um dos três tamanhos. Neste exemplo, seu agente detecta que, em tablets e dispositivos móveis, a barra de pesquisa é expandida para preencher toda a largura do cabeçalho, obscurecendo o link Fazer login.
Recursos com reconhecimento de localização de protótipos
O teste de APIs que dependem da localização física do usuário (como pesquisas "Perto de mim" ou localizadores de lojas) geralmente exige que você substitua manualmente os sensores. Agora, você pode instruir seu agente a falsificar geolocalizações específicas para verificar a lógica de front-end e back-end sem problemas.
Exemplo de comando:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
Exemplo de execução do agente:seu agente navega até o site, pesquisa por Berlim e injeta dinamicamente coordenadas específicas de latitude e longitude para emular Paris, antes de interagir com o recurso Usar minha localização para garantir que as lojas corretas sejam preenchidas.