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

Version imprimable

Voir 40 message(s) de cette discussion en une page

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()")

Voir 40 message(s) de cette discussion en une page