Na semana passada, escrevi sobre o usando o PhantomJS para criar capturas de tela de páginas da Web. Ainda acho incrível que possamos criar capturas de tela de uma página da Web de forma tão rápida e fácil usando um pouco de JavaScript no lado do servidor. Um leitor chamou minha atenção para uma ferramenta que leva a coleta de capturas de tela de páginas da Web a um novo patamar: Wraith. O Wraith, uma ferramenta criada por desenvolvedores da BBC News, não apenas captura capturas de tela das páginas desejadas, mas também captura capturas de tela de dois domínios e compara as duas, criando uma imagem de diferença que sobrepõe as duas capturas de tela para que o senhor possa garantir a integridade entre elas.
Por que o Wraith é útil? Se o senhor tiver um servidor de desenvolvimento e quiser garantir que as novas alterações não afetem negativamente o design do servidor de produção, poderá executar o wraith para comparar a saída de cada página em cada servidor! Vamos dar uma olhada em como usar o Wraith!
Configuração YAML
Supondo que o senhor tenha instalou o Wraith e suas dependênciasSe o Wraith for instalado, o senhor precisará criar um arquivo YAML com informações de configuração para a criação e comparação de capturas de tela. A seguir, a minha configuração:
#Headless browser option browser: "phantomjs" # Type the name of the directory that shots will be stored in directory: "screenshots" # Add only 2 domains, key will act as a label domains: home: "https://davidwalsh.name" localhost: "http://localhost:8080" #Type screen widths below, here are a couple of examples screen_widths: - 320 - 600 - 768x1500 # you can also specify the height, as we've done here - 1024 - 1280 #Type page URL paths below, here are a couple of examples paths: home: / topics: /topics content_template: /content-template #Amount of fuzz ImageMagick will use fuzz: "20%" #Choose how results are displayed, by default alphanumeric. Different screen widths are always grouped. #alphanumeric - all paths (with, and without, a difference) are shown, sorted by path #diffs_first - all paths (with, and without, a difference) are shown, sorted by difference size (largest first) #diffs_only - only paths with a difference are shown, sorted by difference size (largest first) mode: diffs_first threshold: 15
Na minha configuração acima, direcionei o Wraith para:
- Compare meu domínio de produção e meu servidor de desenvolvimento local.
- Faça e compare capturas de tela em vários tamanhos de tela
- Faça e compare capturas de tela de três caminhos críticos
As capturas de tela são colocadas em um diretório “screenshots” com um _diff.png correspondente para cada página relevante. A seguir, uma página de diferenças para a qual, propositadamente, não correspondi o conteúdo:
Os erros no layout são óbvios (propositalmente), portanto, com uma imagem como essa, o senhor poderia dizer que uma alteração feita localmente pode quebrar o layout desejado de determinadas páginas na produção.
Executando o Wraith
O Wraith é instalado como um utilitário de linha de comando para que o senhor forneça a ação desejada e o caminho para o arquivo YAML:
wraith capture davidwalshblog.yaml
Existem muitos comandos além de capture mas o capture é o mais avançado (cria capturas de tela, diffs e uma galeria). Explore os comandos para ver se o Wraith pode atender às suas necessidades.
O Wraith é uma ferramenta incrível que vai além da automação da criação de capturas de tela para comparar capturas de tela e criar diferenças para análise. Grandes organizações como a BBC News precisam de ferramentas como essa para garantir que seus sites incrivelmente populares mantenham a integridade do design; agora o senhor tem acesso às mesmas ferramentas para o seu site!
