Script de contrôle de page web selon la résolution, le navigateur

Navigation: Pages Webmaster > Scripts


Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.


Un site web c'est actuellement des centaines de pages qui sont lues de manière différente : plusieurs navigateurs ouverts depuis différents OS avec des appareils divers proposant un certain nombre de résolutions d'affichage.
Comment le webmaster peut il tester une partie de ces configurations avec certaines de ces pages sans avoir à faire ce travail herculéen.
L'automatisation est une partie de la solution. Le contrôle visuel en est l'autre partie.

Outil de navigation et Capture automatisées



Il existe des outils d'automatisation de capture d'écran qui sont faciles à scripter pour capturer une page web.
C'est par exemple le cas de sélénium webdriver piloté avec un script en python.
Le langage permet de faire une capture d'écran et de stocker l'image dans un répertoire. Le webmaster contrôlera ensuite visuellement chaque image

Liste de pages



Le script peut se charger de capturer une liste de pages prédéfinies, ou bien de constituer cette liste à partir de liens présents par exemple dans la page plan.

Différentes résolution d'écran


Le script peut également faire des captures d'écran selon la résolution indiquée
360 x 640 pour un smartphone, 768 x 1024 pour un Ipad en mode portrait, 1440 x 900 etc … et ce combiné avec la liste de pages précédentes.

Différents navigateurs web


Le script peut enfin faire des captures d'écran selon le navigateur utilisé pour sélénium. C’est-à-dire de manière non exclusive, Internet Explorer, Firefox et Chrome. Et ce également combiné avec les deux critères précédents, à savoir : la résolution d'écran et la liste de pages.

Nous voici donc avec un script Selenium webdriver, permettant de faire une capture d'écran d'une liste de pages web, avec différents navigateurs, en différentes résolutions, afin de contrôler visualiser l'affichage correct des différents composants de la page.



Article écrit par Janol le 14/09/2016
(Hits 459
- Catégorie : Scripts)

Faites passer - Imprimer
Partagez cette page :



Commentaires

Cet article n'a pas encore été commenté.
Vous pouvez vous exprimer en remplissant le formulaire ci-dessous.


Autres publications Scripts

Script de lecture de pages web et d'aide à la décision
(Ecrit le 12/10/2016 - 430 lectures)
Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.

Site web adapté à la taille de l'écran
(Ecrit le 06/03/2014 - 3.494 lectures)
Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).

Placeholder sous IE
(Ecrit le 24/01/2014 - 2.849 lectures)
L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.

Rendre ses scripts asynchrones pour optimiser le chargement de pages web
(Ecrit le 23/05/2012 - 4.621 lectures)
En plus d'un bon placement de scripts dans la page, il est possible d'accélérer le chargement d'une page en gérant ses scripts de manière asynchrone.

Twitter et les raccourcis d'url
(Ecrit le 22/09/2010 - 4.071 lectures)
Septembre 2010 voit les nouveaux raccourcis d'url se mettre peu à peu en place avec la nouvelle version de twitter. Quels sont alors les impacts sur le développement des pages vis à vis de l'API Twitter.

Interdire le clic droit
(Ecrit le 17/02/2010 - 15.931 lectures)
Empêcher la copie d'images, mais cela seulement en évitant d'utiliser des instructions restrictives.

Script pour lecteur vidéo embarqué
(Ecrit le 04/04/2009 - 5.198 lectures)
Lorsque l'on intègre sur un site web les lignes de code proposées par les sites de plateforme vidéo, le code n'est pas valide selon la syntaxe du W3C. voici donc un code correct.

Personnaliser ses cartes Google Maps : les icones
(Ecrit le 20/03/2008 - 11.025 lectures)
Les icônes google maps sont personnalisables, pour des cartes intégrées dans un site web et qui communiquent ainsi d'avantage. Ce code source est utilisable.

CMS Gestion de contenu
(Ecrit le 15/02/2004 - 7.480 lectures)
La gestion de contenu, ou la Publication Assistée par Internet avec un CMS (Système de gestion de contenu)

Pages statiques ou pages dynamiques
(Ecrit le 15/10/2003 - 6.919 lectures)
Sites web avec Pages statiques ou pages dynamiques, comment ne pas confondre les deux !

Optimiser son code source
(Ecrit le 19/06/2003 - 6.766 lectures)
Peu d'outils web permettent cette option de manière intrinsèque et pourtant il est possible voire conseillé d'optimiser son code source.



Tutoriels Webmaster

Scripts :

Internet a deux caractéristiques principales : Cela bouge beaucoup et cela bouge vite. Le webmaster se doit d'être actif, voire réactif, et de disposer de l'information rapidement. Un simple script en python peut l'aider.


Scripts :

Comment contrôler visuellement que l'affichage de différentes pages web se fait correctement avec les différentes configurations de navigateur, et résolution d'affichage. Le Webdriver de Sélénium permet via un script d'automatiser la captures de telles pages, pour contrôler en un coup d'oeil le résultat.


Conception :

Optimiser un site web avec du responsive design est un pas de plus fait vers l'utilisateur final
Pour autant, si une page du site a un poids de plusieurs méga, l'utilisateur risque, si il est sur un téléphone mobile, de partir avant que la page ne soit complétement chargée.


Outils :

Comment gérer les erreurs 404 not found sur le fichier browserconfig.xml, alors que celui ci est demandé par le navigateur.


Scripts :

Les feuilles de style d'un site web permettent d'adapter l'affichage à la taille de l'écran. Voyons comment faire pour un site qui s'affiche aussi bien sur un ordinateur, une tablette qu'un téléphone intelligent (smartphone).


Scripts :

L'attribut Placeholder, permettant en HTML5 de renseigner le label d'un champs input, ne fonctionne pas sous Internet Explorer. Voici un script JavaScript simple et efficace à insérer pour contourner ce manque de fonctionnalité.


Sécurité :

Poster un spam sur un forum est pour certains acteurs du web un exercice amusant. Pour d'autres c'est un moment de réflexion obligatoire pour éviter de se faire spammer.
Voyons quelles sont les solutions pour éliminer les posts des spameurs tout en gardant ceux des internautes.


Qualité :

Si il est préférable de faire un tweet lisible, voyons comment faire pour le générer de manière automatique à partir d'un article.


Pages webmaster Ajoutez à votre page Google

Projet Web NTIC


Annuaire


Thèmes Phortail