Phantom js sélectionnant un élément à partir d'un site externe

Question

J'ai un script Phantom JS, qui surveille certaines pages externes. Fondamentalement, il obtient tout état de ces pages comme celui-ci (code tapuscrit):

const status: string = await page.evaluate(function() { 
     return document.getElementsByClassName("status-containing-element")[0].innerHTML; 
}); 

Dans certains cas, cet élément ne peut être affiché sur le site, alors supposons mon script que le site est actuellement indisponible. Le problème est, si statut de l'élément contenant nom de classe sera changé, mon script pensera toujours, ce site est indisponible jusqu'à ce que je remarque, ce nom de classe est changé. Comme une solution, j'ai essayé de prendre une capture d'écran de la page avec fantôme et en vérifiant certaines parties pour déterminer l'état de la page, mais cela me semble être un surcoût.

Y a-t-il un meilleur moyen/moyen d'éviter de tels problèmes, par ex. détecter automatiquement le changement de structure du site ou smth comme ça?

Answer 1

En plus du nom de classe, ou à la place de celui-ci, je suggérerais d'interroger un sélecteur spécifique en utilisant querySelector(). Habituellement, le nom de la classe peut changer, tandis que la structure générale de la page reste la même. Par exemple, pensez à quelque chose comme ça:

document.querySelector('#container > div > div > ul > li:nth-child(2) > span > a'); 

Pour voir ce qui est le sélecteur qui représente votre élément, vous pouvez utiliser les outils pour les développeurs Chrome: trouver dans le menu « Eléments » (clic droit -> Vérifier), faites un clic droit son code, Copier -> Sélecteur. Vous pouvez ensuite filtrer les noms de classes si elles changent fréquemment pour ne conserver que la structure.

Notez également que dans votre code, vous récupérez plusieurs éléments puis prenez le premier ([0]), tandis que querySelector() renverra un seul élément. Si vous avez besoin de tous les sélecteurs, utilisez querySelectorAll().