Discussion :

[Kametleon]

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]

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]

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]

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]

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]

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]

Code :

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

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