IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

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


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti Avatar de Kametleon
    Homme Profil pro
    Marin
    Inscrit en
    Avril 2018
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Marin
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Avril 2018
    Messages : 19
    Par défaut 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 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.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut


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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 099
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 099
    Par défaut
    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.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  4. #4
    Membre averti Avatar de Kametleon
    Homme Profil pro
    Marin
    Inscrit en
    Avril 2018
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Marin
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Avril 2018
    Messages : 19
    Par défaut
    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
    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%;">

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    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")
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre averti Avatar de Kametleon
    Homme Profil pro
    Marin
    Inscrit en
    Avril 2018
    Messages
    19
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Marin
    Secteur : Aéronautique - Marine - Espace - Armement

    Informations forums :
    Inscription : Avril 2018
    Messages : 19
    Par défaut
    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.

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.querySelector("#agrid .ships .ship img[data-id='523822']")
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

Discussions similaires

  1. Simulation de clic
    Par seiryujay dans le forum Agents de placement/Fenêtres
    Réponses: 7
    Dernier message: 31/08/2005, 17h05
  2. [JToggleButton] simuler un clic
    Par norkius dans le forum Composants
    Réponses: 4
    Dernier message: 30/05/2005, 16h35
  3. [VB.NET] Ouvrir fichier dans appli par double-clic dessus
    Par vynce dans le forum Windows Forms
    Réponses: 4
    Dernier message: 29/03/2005, 16h43
  4. [SET]Recherche d'éléments communs à 2 sets
    Par CappCorp dans le forum SQL Procédural
    Réponses: 5
    Dernier message: 03/01/2005, 17h03
  5. [JDOM] Recherche d'éléments en JDOM
    Par newfsch dans le forum Format d'échange (XML, JSON...)
    Réponses: 2
    Dernier message: 09/04/2004, 18h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo