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

**Kametleon** · 18/04/2018, 16h48

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**danielhagnoul** · 18/04/2018, 19h38

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 } );

**Watilin** · 18/04/2018, 19h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais ce n’est pas le vrai problème

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é

@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.

**Kametleon** · 19/04/2018, 03h41

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

querySelector('img')

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

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

devient

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 19/04/2018, 08h09

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Kametleon** · 19/04/2018, 15h34

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**SpaceFrog** · 19/04/2018, 15h41

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Kametleon** · 19/04/2018, 16h50

@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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SpaceFrog** · 19/04/2018, 16h56

tu ne fermes pas les divs ???

**Kametleon** · 19/04/2018, 17h03

c'est à dire ?
Le code HTML n'est pas de mon fait les div sont fermé ^^

**SpaceFrog** · 19/04/2018, 17h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

https://jsfiddle.net/q9fs4tng/9/

**Kametleon** · 19/04/2018, 17h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pareil aucun changement :/
J'ai essayé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sans succès non plus

**SpaceFrog** · 19/04/2018, 17h15

heu getAttribute('src') retourne un string ...

la valeur du src ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pointe bien sur l'image ...

**SpaceFrog** · 19/04/2018, 17h18

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

**Kametleon** · 19/04/2018, 17h22

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Kametleon** · 19/04/2018, 17h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 19/04/2018, 17h58

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

#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é !

**Kametleon** · 19/04/2018, 18h12

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Mais seulement la version "lourde"

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**NoSmoking** · 19/04/2018, 19h18

Je me disais qu'avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Kametleon** · 19/04/2018, 20h59

je comprend mais pourquoi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Ca fonctionne. Et pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

WebControl1.ExecuteJavascriptWithResult(" truc")

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JavaScript

Discussions similaires

Partager

Partager