Recherche un élément puis simuler un clic dessus.

Version imprimable

18/04/2018, 16h48
Kametleon

Recherche un élément puis simuler un clic dessus.

Bonjour à tous !
Je me permet de venir vous poser une petite question sur du Java. En effet, je suis entrain de faire une application en VB pour remplir un document HTML automatiquement (Lien du forum) Après avoir pédalé comme un fou pour afficher correctement ma page Html dans un webbrowser (de Awesomium), il me reste le soucis d'identifier mes éléments et d'agir dessus.
Le code HTML

Code:

<div id="nav"> <a href="/map/" data-item="map" title="Carte"><img src="/img/nav/map.png"></a>

Donc j'ai essayé de rechercher cette image et de cliquer dessus avec :

Code:

document.getelementbyid("nav").getattribute("data-item=map").click()

Malheureusement, ça ne marche pas. Le webbrowser utilisé est Chrome et donc le .click() devrait fonctionner... Le problème doit venir de la recherche de mon élément...
Merci d'avance pour vos futures réponses.

:salut:

Attention, en JS le a et le A sont différents.

Code:

1
2
3
4
5
<div id="nav"> 
    <a href="https://www.google.com" data-item="map" title="Carte">
        <img src="../images/apple-touch-icon.png">
    </a>
</div>

Code à mettre entre tag 'script' dans le tag 'head' de la page web

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
window.addEventListener('load', ev => {
    // le DOM est construit et la page web est visible
 
    // début code du test
 
    const 
        elemA = document.querySelector( '#nav > a' );
 
    // get attribut data-item
    let attributMap = elemA.getAttribute( 'data-item' );
 
    console.log( attributMap );
 
    // simuler un click
    setTimeout( () => {
        elemA.dispatchEvent( new Event( 'click' ) );
    }, 3000 ); // 3s
 
   // afficher dans la console; touche F12
    elemA.addEventListener( 'click', ev => {
        console.log( `${ ev.target } a été cliqué` );
    }, { capture: false, passive: true, once: false } );
 
 
    // fin code du test
 
}, { capture: false, passive: true, once: false } );

Si l'utilisateur clique sur l'image, la page web change immédiatement et l'utilisateur ne verra pas le résultat produit par le gestionnaire d'événement 'click'.

Lors de l'événement 'click' simulé, le résultat sera visible, mais la page ne changera pas. On peut changer la page en ajoutant, par exemple, le code :

Code:

1
2
3
4
5
6
7
elemA.addEventListener( 'click', ev => {
    console.log( `${ ev.target } a été cliqué` );
 
    setTimeout( () => { 
        window.location.href = ev.target.getAttribute( 'href' ); 
    }, 1000 );
}, { capture: false, passive: true, once: false } );

18/04/2018, 19h45
Watilin
Salut,

on a vu passer un autre expert VB il y a quelques temps… Et il avait le même problème que toi : la casse, autrement dit la distinction majuscules-minuscules :)

Code:

document.getelementbyid("nav").getAttribute( ...

Mais ce n’est pas le vrai problème :aie:

Le problème c’est que tu essayes d’agir sur un attribut alors qu’il faudrait que tu agisses sur un élément. L’élément en question est <a>, tu peux y accéder de plusieurs façons :
- document.getElementById("nav").querySelector("a")
- document.querySelector("#nav").querySelector("a")
- document.querySelector("#nav a")
Quelle que soit la manière, tu pourras mettre le .click() après.

Pour t’aider à développer en JS, utilise la console F12 de ton navigateur. Et pour t’aider à coder proprement, il y a les linteurs JSLint ou JSHint, qui existent sous forme d’extensions pour les IDE et éditeurs de texte les plus connus, et qui ont également une version en ligne : https://jslint.com/ et http://jshint.com/.

Edit : arf Daniel, tu m’as grillé :P

@kametleon : entre temps j’ai regardé ton autre conversation, et je vois que ton environnement ne te permet peut-être pas d’accéder à la console F12. Je dois avouer que j’ignore totalement comment faire remonter des informations… Si les erreurs ne remontent pas, c’est un vrai problème. Je vais essayer de trouver des infos.

Un grand pas en avant ! Merci à vous deux @danielhagnoul et @Watilin qui m'avait donné de quoi travailler !!

Avec document.querySelector('#nav').querySelector('a[data-item=speed]').click()J'ai pu choisir le menu à cliquer parmi tous ceux present dans le "nav"

Etape 2
Malgrés les avancées du dessus impossible de cliquer sur une image...
Code:

1 2 3 4 5 6 7 8 9 <div id="agrid"> <div class="ships"> <div class="ship" data-id="523822" style="left: 50.5%; top: 33.8333%;"> <img class="icon round" src="/img/provalys.png"> <div class="name">XxxXXxXX </div> </div> </div> </div>
J'ai donc simuler mon clic sur l'image sans sucés avec:

Code:

document.querySelector('div[data-id=523822]').querySelector('img').click()

Code:

document.querySelector('div[data-id=523822]')

pour le div avec la valeur de data-id unique puis

Code:

querySelector('img')

pour la premier <img> que l'on croise.

Lorsque je clic manuellement sur cette image, la class change:

Code:

<div class="ship" data-id="523822" style="left: 50.5%; top: 33.8333%;">

devient

Code:

<div class="ship selected" data-id="523822" style="left: 50.5%; top: 33.8333%;">

Code:

1
2
3
4
<div id="agrid">
     <div class="ships">
           <div class="ship" data-id="523822" style="left: 50.5%; top: 33.8333%;">
                    <img class="icon round" src="/img/provalys.png">

Code:

document.querySelector("#agrid .ships .ship img")

Mon soucis vient du fait qu'il y a plusieurs <img> avec la class="ship" mais ils ont des data-id différents
Code:

1 2 3 4 5 6 <div id="agrid"> <div class="ships"> <div class="ship" data-id="523822" style="left: 50.5%; top: 33.8333%;"> <img class="icon round" src="/img/provalys.png"> <div class="ship" data-id="795246" style="left: 50.5%; top: 33.8333%;"> <img class="icon round" src="/img/gaselys.png">
Es que ce qui suit, peux marcher ? Ou un équivalent ...
Code:

1 2 document.querySelector("#agrid .ships .ship .data-id=523822 img")
ou
Code:

1 2 document.querySelector("#agrid .ships .ship img[2]")
Comme pour dire de prendre la 2iéme image après avoir trouver la class="ship" ?

Je vais tester ! J'éditerais mes trouvailles ;)
Merci encore pour la réponse.

19/04/2018, 15h41
SpaceFrog

Code:

document.querySelector("#agrid .ships .ship img[data-id='523822']")
19/04/2018, 16h50
Kametleon
@SpaceFrog Cela ne fonctionne pas :/
Avec la souris, j'ai une couleur bleuté qui se rajoute lors de mon clic.
Avec ton code rien ne se passe...
j'ai un autre endroit pour sélectionner mon navire qui semble plus simple...
Code:

1 2 3 <p id="sel" class=""> <img class="round unit" data-id="523822" src="/img/gaselys.png" > <img class="round unit" data-id="957854" src="/img/provalys.png" >
Question: es qu'il faut dans le queryselector le chemin depuis le body ?
19/04/2018, 16h56
SpaceFrog

tu ne fermes pas les divs ???
19/04/2018, 17h03
Kametleon

c'est à dire ?
Le code HTML n'est pas de mon fait les div sont fermé ^^
19/04/2018, 17h04
SpaceFrog

Code:

document.querySelector("#agrid .ships .ship[data-id='523822'] img").getAttribute('src')

https://jsfiddle.net/q9fs4tng/9/
19/04/2018, 17h09
Kametleon

Code:

document.querySelector("#agrid .ships .ship[data-id='523822'] img").getAttribute('src').click()

Pareil aucun changement :/
J'ai essayé

Code:

document.querySelector('#sel .unit[data-id='523822'] img').click()

Sans succès non plus
19/04/2018, 17h15
SpaceFrog

heu getAttribute('src') retourne un string ... :roll: la valeur du src ...

Code:

document.querySelector("#agrid .ships .ship[data-id='523822'] img")

Pointe bien sur l'image ...
19/04/2018, 17h18
SpaceFrog

https://jsfiddle.net/q9fs4tng/13/

Toujours rien...
aucun signe de réaction de la page web sur le clic...
Code:

1 2 3 4 <p id="sel" class=""> <img class="round vessel" data-id="523822" src="/img/provalys.png" title="Provalys"> <img class="round vessel" data-id="953485" src="/img/gaselys.png" title="Gaselys"> </p>
https://jsfiddle.net/q9fs4tng/14/

Es que pour <p> c'est plus facile ?

19/04/2018, 17h37
Kametleon

Code:

document.querySelector('#sel .round vessel[data-id='523822'] img').click()

Aucun résultat non plus...
Pourtant avec <a> aucun problème mais alors sur <img> sa veut juste pas xD
19/04/2018, 17h58
NoSmoking

Bonjour,
il te faut reprendre sereinement ton sélecteur et comprendre ce qu'il signifie.

Code:

#sel .round vessel[data-id='523822'] img

il se lit de droite à gauche soit :

ciblage d'un élément <img> contenu dans un élément <vessel> (?) dont l'attribut data-id est égal à 523822, contenu dans un élément ayant la class round (.round) lui même contenu dans un élément dont l'id est sel (#sel).

D'après ton code HTML c'est pas gagné !
19/04/2018, 18h12
Kametleon

J'ai réussit à clic sur un élément avec ceci :

Code:

document.querySelector('a[data-tab=gaselys]').click()

je clic sur le lien <a> qui possède data-tab=gaselys. Le data-tab étant unique j'ai même pu supprimer les autres querySelector pour ma recherche du lien.
Je me disais qu'avec

Code:

document.querySelector('img[data-id=523822]').click()

Pour cliquer sur <img> qui possède data-id=523822
Cela devrait marcher aussi... mais non :/

PS: J’exécute le scrip java dans un programme en VB ... Après test, il ne prend pas le

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('#agrid .ships .ship[data-id='523822'] img').click()")

Mais seulement la version "lourde"

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('#nav').querySelector('a[data-tab=gaselys]').click()")
19/04/2018, 19h18
NoSmoking

Citation:

Je me disais qu'avec

Code:

document.querySelector('img[data-id=523822]').click()

Pour cliquer sur <img> qui possède data-id=523822
Cela devrait marcher aussi... mais non :/

ton sélecteur n'est pas conforme il te faut écrire par exemple :

Code:

var elem = document.querySelector('img[data-id="523822"]'); // note les guillemets autour du nombre

il te faudra donc les échapper pour les mettre dans ta commande, ou alors mets au moins une lettre devant exemple :

Code:

var elem = document.querySelector('img[data-id=img_523822]');

et si ta data-id est unique tu peux même supprimer img de ton sélecteur.
19/04/2018, 20h59
Kametleon

je comprend mais pourquoi :

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('a[data-tab=provalys]').click()")

Ca fonctionne. Et pas :

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('img[data-id=523822]').click()")

Dans le code VB je ne peux pas mettre de " mais seulement des ' car les guillemets sont pour la fonction

Code:

WebControl1.ExecuteJavascriptWithResult(" truc")

Même en mettant les ', le résultat reste incorrecte :/

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('img[data-id='523822']').click()")

Citation:

je comprend mais pourquoi :

parce que dans un cas il traite une chaîne et dans l'autre un numérique.

• Avec le code HTML suivant :

Code:

<span id="123" data="123">...</<span>

Regarde ce qui se passe avec ces codes

Code:

1
2
3
4
5
6
7
8
console.log("(0)",document.getElementById("123"));                  // valide
console.log("(1)",document.getElementById(123));                    // valide
 
console.log("(2)",document.querySelector('#\\31 23'));              // valide en échappant le premier chiffre suivi d'un espace
console.log("(3)",document.querySelector('[data=\\31 23]'));        // valide en échappant le premier chiffre suivi d'un espace
console.log("(4)",document.querySelector('[data=\\31\\32\\33]'));   // valide en échappant chaque chiffre
console.log("(5)",document.querySelector('[data="123"]'));          // valide avec guillemets
console.log("(6)",document.querySelector('[data=\'123\']'));        // valide avec échappement des quottes

• Voir 4.1.3 Characters and case

Citation:

Même en mettant les ', le résultat reste incorrecte :/

l'exemple est traité ci dessus.

20/04/2018, 14h41
Watilin

Citation:

Envoyé par Kametleon

je comprend mais pourquoi :

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('a[data-tab=provalys]').click()")

Ca fonctionne. Et pas :

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('img[data-id=523822]').click()")

C’est juste une hypothèse, mais dans le premier cas le clic est émis sur un lien, et dans le second cas sur une image. Peut-être que ça ne marche qu’avec les liens.
20/04/2018, 17h17
Kametleon
Avec vos infos j'ai donc :
Code:

1 2 document.querySelector('#anewacts').querySelector('div[data-id=\\538476]').click() document.querySelector('#anewacts').querySelector('div[data-id=\'538476\']').click()
J'ai bien mis les ' et \ au bon endroit ?
Je test dés que possible :)
EDIT: Malgré tout les forme d’écriture, il ne se passe rien ... Je commence à croire que .click() ne fonctionne que sur des liens et pas sur des img ou bouton...

Je me suis posé la même question que @Watilin...

Citation:

C’est juste une hypothèse, mais dans le premier cas le clic est émis sur un lien, et dans le second cas sur une image. Peut-être que ça ne marche qu’avec les liens.
20/04/2018, 18h57
Kametleon
Bon j'ai réussit avec une chinoiserie
Code:

1 2 document.querysSelector('#agrid > div > div:nth-child(8) > div.uicon.round > img.icon.round')
Mais le soucis (sinon sa serait trop simple) c'est que le div:nth-child(8) n'est pas toujours le 8 ...
il y aurait moyen de compter pour trouver le bon numéro ?
24/04/2018, 12h05
NoSmoking
Citation:

Mais le soucis (sinon sa serait trop simple) c'est que le div:nth-child(8) n'est pas toujours le 8
- à quoi ressemble ton code HTML pour ces éléments ?
- tu ne peux pas le cibler autrement en modifiant tes ID par exemple ?

La page web n'est pas de mon fait. Sauf erreur de ma part je ne peux donc pas changer les ID ou autres éléments de la page...
Je sais que les <div> et que le code HTML est mit en place suivant des critères (rempli ou non).
Au chargement de la page il doit aller vérifier certaines choses puis il m'affiche en conséquence les éléments que je doit remplir.

Le code HTML général reste le même mais les "Childs" sont différents suivant les critères de chargement de la pages qui changent de temps à autres...
le code est comme je citais dans mes précédents messages :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div id ="agrid"> <div2> ... <divX> <p id="sel" class=""> <img class="round vessel" data-id="523822" src="/img/provalys.png" title="Provalys"> <img class="round vessel" data-id="953485" src="/img/gaselys.png" title="Gaselys"> </p> </divX> ... </div2> </div>
Le code suivant fonctionne pour "appuyer" sur une image contenu dans le 8iéme div

Code:

document.querysSelector('#agrid > div > div:nth-child(8) > div.uicon.round > img.icon.round')

Mais ... La page se chargeant suivant certains critères que je n'ai pas ce n'est pas toujours le 8iéme... Donc le code ne fonctionne que si j'arrive à trouver que se que je cherche est dans le 8iéme child...
PS: Le code ci-dessus je l'ai eu en "inspectant" mon élément avec Chrome et en copiant le Selector proposé par ce dernier.

DANS LE MEILLEUR DES MONDES ^^ :
Le code idéal serait comme pour la simulation de clic comme sur un lien <a> (Le code dessous fonctionne très bien):

Code:

<a ref=" trucbidule" data-tab="provalys"> Texte </a>

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('a[data-tab=provalys]').click()")

Donc j'ai garder la même "idée" pour cliquer sur une <img> ou un <button> mais gros fail...

Code:

<img ref=" trucbidule" data-tab="speed"> Texte </a>

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('img[data-tab=speed]').click()")

Code:

<button ref=" trucbidule" data-tab="course"> Texte </a>

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelector('button[data-tab=course]').click()")

Le truc chiant est que dans le code WebControl1.ExecuteJavascriptWithResult() je ne peux pas mettre de guillemet " ...je suis limité à des '

25/04/2018, 01h00
Watilin

Je vais peut-être enfoncer des portes ouvertes mais j’aimerais lever toute ambiguïté et être sûr que tu es au courant des points suivants :

1. Dans un code HTML, il y a des balises en deux parties, la partie ouvrante et la partie fermante ; et il y a les balises en une seule partie. <img> est une balise en une seule partie. Pour la lisibilité on peut ajouter un slash à la fin : <img />.
Quand tu as ce code :

Code:

<img ref=" trucbidule" data-tab="speed"> Texte </a>

Tu as en réalité une image contenue dans un lien, dont la partie ouvrante est absente ; l’image est voisine d’un nœud de texte contenant Texte, elle ne le contient pas.

2. NoSmoking l’a déjà dit mais je vais le répéter : pour échapper un guillemet dans une chaîne, précède-le d’un antislash : '\''. La coloration syntaxique de ce forum devrait t’aider.

3. Un clic n’aura évidemment d’effet que sur un élément qui est prévu pour ça. Soit c’est un élément naturellement interactif tel qu’un lien, un bouton ou un contrôle de formulaire, soit les scripts de la page y ont ajouté un gestionnaire d’évènement. Si tu veux vraiment cliquer sur une image, vérifie qu’elle a un gestionnaire de click, sinon c’est probablement que tu te trompes d’élément.
Note que l’évènement clic « remonte » (on dit qu’il bouillonne) vers le parent de l’élément ciblé, puis vers ses grands-parents, etc. jusqu’à la racine du document.

À présent, je voudrais que tu testes les commandes suivantes dans ton environnement, une à la fois, et que tu me dises ce que tu reçois en résultat :

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelectorAll('#agrid img.icon.round')")

Code:

WebControl1.ExecuteJavascriptWithResult("document.querySelectorAll('#agrid img.icon.round').length")

Code:

WebControl1.ExecuteJavascriptWithResult("Array.from(document.querySelectorAll('#agrid img.icon.round'))")