Como tirar uma captura de tela de uma seção rolável embutida em um site?

Question

Se você acessar a seção de pesquisa de lojas do Walmart e digitar seu código postal, você verá uma lista de 20 lojas junto com um mapa ao lado dela. Eu gostaria de fazer uma captura de tela do mapa E da lista na íntegra. Não me importo de fazer dois passos: 1) o mapa e 2) a lista.

No entanto, não consigo descobrir como obter uma captura de tela dessa longa lista. Como você pode ver, apenas uma pequena parte da lista é visível. Além disso, não precisa ser uma captura de tela. Eu ficaria satisfeito em copiar e colar, mas a estrutura da lista é destruída quando eu faço isso. Os itens do lado direito da lista (Opções de recebimento e Nesta loja) acabam indo para o fundo e não para a direita como estão.

    

Answer 1

Não é realmente uma captura de tela de página inteira, pois a parte que interessa ao pôster está oculta

Minha solução requer alguma inquietação, mas funciona.

Vou explicar isso usando o Firefox, mas operações semelhantes podem ser realizadas com navegadores modernos, todos com um inspetor html / css embutido.

• clique com o botão direito dentro da lista rolável, muito perto do canto superior esquerdo, selecione "Inspecionar elemento": uma janela aparece com código HTML à esquerda e CSS à direita

• na exibição do código HTML, encontre uma entrada que diga <div id="resultStores" style="height:311px;"></div> . Edite essa entrada, substituindo a figura entre height: e px; pela palavra auto

= > <div id="resultStores" style="height:auto;"></div>

• veja acima dessa entrada, você encontrará uma outra div, <div id="searchInfo">

• observe no painel CSS à direita um bloco intitulado #searchinfo com overflow: hidden . Substitua a palavra hidden pela palavra visible

Tada, sua página agora deve exibir a lista completa

Familiarize-se com o processo e agora é hora de instalar um utilitário de captura de página inteira. Com o Firefox, eu recomendo o plugin Fireshot .

• defina a altura de <div id="resultStores"> para auto
• definir um excesso de <div id="searchInfo"> para visible
• com a mesma ferramenta de inspetor, você também pode remover os dois blocos no rodapé, que atrapalharão uma parte da captura de tela: clique com o botão direito para inspecionar esses elementos, clique com o botão direito novamente para remover o nó, repita .
• clique com o botão direito na página e use o FireShot para capturar a página inteira.

Et voilà:)

Espero que ajude.

    

Answer 2

O que você procura é chamado de "captura de tela da página inteira". Como você não disse qual navegador está usando, é difícil recomendar um aplicativo, mas aqui estão alguns exemplos:

link link