Javascript Girl
  1. Javascript Girl
  3. Comment cliquer sur les options de la boîte de sélection en utilisant PhantomJS
Intereting Posts
Demander un site Web par script côté client = Cross Side Scripting Hack. Mais demander un site Web par script côté serveur n'est pas un hack! Pourquoi? Google Maps API parfois ne retourne pas PostalCode dans AddressDetails Comptage efficace du nombre de clés / propriétés d'un objet en JavaScript Opérateurs logiques AND (&&) et OR (||) Création dynamique de la grande table html en performance javascript Comment puis-je changer la taille d'un iframe de l'intérieur? Socket.io renvoie une erreur 404 avec Express + http Regex et ISO8601 formatés DateTime JavaScript; Création de tableau n-dimensionnel Modification de navigator.userAgent en utilisant Chrome Extension Héritage JavaScript Object.create () ne fonctionne pas comme prévu Manipulateurs d'événements, fermetures et collecte des ordures dans Javascript L'événement jQuery qui déclenche après le chargement du CSS? Toujours obtenir 'Not Found' lors de la restauration manuelle avec la route angular.js Comment puis-je vérifier si une image d'arrière-plan est chargée?

Comment cliquer sur les options de la boîte de sélection en utilisant PhantomJS

Il y a la page testkrok.org.ua avec une sélection de paramètres cohérente. Donc, j'ai besoin de créer une série de 5 clics sur chacune des options de 5 boîtes de sélection qui dépendent les unes des autres. 

document.querySelector('select.se1')[3] document.querySelector('select.se2')[1] document.querySelector('select.se3')[1] document.querySelector('select.se4')[1] document.querySelector('select.se5')[3]

Pour rediriger vers la page avec des tests.

Mais sur l'instantané pris après le premier clic, le deuxième panneau n'apparaît pas? Peut-être que je ne frappe pas l'élément? 

 var page = require('webpage').create(); page.open('https://testkrok.org.ua', function(status) { console.log("Status: " + status); if(status === "success") { page.evaluate(function() { var theEvent = document.createEvent("MouseEvent"); theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); var element = document.querySelector('select.se1')[3]; element.dispatchEvent(theEvent); }); } setTimeout( function() { page.render('snapshot.png'); phantom.exit() }, 5000); });

Vous ne pouvez pas cliquer (déclencher un événement de clic) sur les options d'une boîte de sélection. Vous devez modifier l'option sélectionnée, puis déclencher un événement de modification . Par exemple: 

 var sel = document.querySelector('select.se1'); sel.selectedIndex = 2; var event = new UIEvent("change", { "view": window, "bubbles": true, "cancelable": true }); sel.dispatchEvent(event);

Vous pouvez l'empaqueter dans une fonction 

 function selectOption(selector, optionIndex) { page.evaluate(function(selector, optionIndex){ var sel = document.querySelector(selector); sel.selectedIndex = optionIndex; var event = new UIEvent("change", { "view": window, "bubbles": true, "cancelable": true }); sel.dispatchEvent(event); }, selector, optionIndex); }

Ensuite, vous pouvez l'appeler l'un après l'autre 

 selectOption("select.se1", 2); selectOption("select.se2", 0); selectOption("select.se3", 0); ...

Vous avez l'idée. Dans le cas où l'événement onChange de la boîte de sélection nécessite des données distantes par exemple via AJAX, vous devrez attendre entre les appels. Utilisez un temps d'attente statique (voir l'exemple suivant) ou utilisez waitFor() . 

 setTimeout(function(){ selectOption("select.se1", 2); }, 1000); setTimeout(function(){ selectOption("select.se2", 0); }, 2000); setTimeout(function(){ selectOption("select.se3", 0); }, 3000); ...