Comprendre les pages web

Maintenant que nous pouvons ouvrir des pages web de façon automatisée, il est temps d’apprendre à interagir avec le navigateur. Pour ce faire, vous devez avoir de connaissances minimales sur les langages permettant la réalisation de site web, principalement le HTML et le CSS. Ces deux langages ne permettent pas de programmer, mais plutôt de décrire un site web. D’une part, le HTML permet de décrire la structure de la page, alors que l’autre le CSS permet de personnaliser le site web.

Un document HTML contient des balises, généralement une ouvrante et une fermante, qui peuvent être agrémenter d’attributs pour cibler ou personnalisation leur interaction avec le reste de la page. Par exemple, on utilisera la balise « p » pour définir un paragraphe, «a» pour un lien et «img» pour une image. On peut aussi combiner plusieurs balises pour changer leur fonction. Par exemple, en encapsulant une image dans un lien, nous pouvons construire une image cliquable:

<p><a href="http://www.google.ca/"> <img src="chemin/vers/mon/image.png" alt="Texte descriptif" /> </a></p>

On intègre également certains attributs pour cibler du contenu précis. Par exemple, je souhaite cibler l’avatar, mais pas la bannière, alors je dois l’identifier avec un des multiples identificateurs. Ces identificateurs/sélecteurs, vous devez les connaître afin de pouvoir cibler du contenu avec votre script Python. Voici donc une liste des sélecteurs possibles:

• Balise: Elle permet de sélectionner l’ensemble des éléments d’un même type, donc cibler « a » pour sélectionner tous les liens de la page web par exemple.
• ID: Un attribut contenu dans la balise qui permet de cibler un seul élément dans une page. Il ne peut pas y avoir deux fois le même ID dans une page, mais ce ne sont pas tous les éléments qui en ont un. Le ID se présente comme suit dans le code: id=’nomDuID’
• Class: Un attribut contenu dans une balise permettant de cibler tous les éléments d’une page qui la possède. C’est comme un ID, mais pour plusieurs éléments. Cela se présente comme suit: class=’nomDeLaClasse’
• Name: Il s’agit encore une fois d’un attribut permettant de sélectionner un seul élément, mais on le retrouve essentiellement sur des champs de formulaire, comme une barre de recherche ou les champs d’un formulaire d’inscription. Cela se présente comme suit: name=’nom’.
• Xpath: Ce dernier est un identificateur généré par le navigateur, et donc, qui n’est pas déterminé par le programmeur. Cela permet de sélectionner un élément très précis, même s’il n’y a aucun ID ou classe. Exemple: ‘/html/body/form[1]’

Nous utiliserons ces sélecteurs pour réaliser nos différentes actions. Sachez également qu’une page web est normalement composée d’un « head », qui contient les métadonnées (non visible à l’écran), puis un « body », le site visible. De même, pour analyser une page web, vous devrez utiliser l’inspecteur d’éléments, qu’il est généralement possible d’afficher en faisant un clic-droit sur un élément du site, puis en sélectionnant Inspecter un élément. Vous pouvez également utiliser F12 dans la plupart des navigateurs.