Discussion :

[jas789]

Bonjour,

Je me suis lancé dans le JS il y a peut afin de développer une petite application ayant pour objectif d'automatiser certaines de mes actions sur une page web.
Je vous écris aujourd'hui car cela fait plusieurs jours que je suis bloqué sur une action.

Je cherche à effectuer un focus dans un input contenant la valeur 123456 le problème étant que l'input ne dispose pas d'ID ou de name.
De plus je ne peux pas modifier le code source pour attribuer un ID.

Malheureusement cette page étant privé je ne peux donner son url mais je vais essayer de vous d'écrire au mieux la procédure.

1/J'arrive sur la page www.mapage.fr
2/Le script se lance automatiquement grâce à un module Firefox
3/Le script simule une pression sur le bouton modifier avec le code suivant

Code :

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

document.querySelector("[id='boutonmodifier']").click()

4/La page ne change pas d'adresse mais affiche plusieurs inputs ayant tous le même code (sauf la valeur)

Code :

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

<input type="text" value="123456" cn="code">

5/Ici j'aimerais effectuer une recherche de la valeur 123456 et la focus

J'ai essayé avec le code suivant qui semble fonctionner sur les autres pages sauf la mienne ou cela ne fonctionne pas.

Code :

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

document.querySelector("[value='123456]").focus()

Je reste à votre disposition pour tout renseignements supplémentaires.

En vous remerciant par avance.

[psychadelic]

et pourquoi pas document.querySelectorAll('input').forEach(el=>{if (el.value=='123456') el.focus()}) ?

[jas789]

Bonjour merci pour ton aide malheureusement cela ne marche pas.

[psychadelic]

Pour un codeur, dire " ça marche pas " c'est pas très pro..

=> qu’est-çà qui marche pas ?
=> quel est le message d'erreur ?

et comme de toute façon on ne sait pas à quoi ressemble la partie html, si ça se passe dans une fenêtre fille ou dans div passant en premier plan, etc... ,si tu veux de l'aide demande plutôt à une voyante extra lucide

[jas789]

Je ne suis pas codeur j'apprend

Le focus ne se fait pas dans l'input contenant 123456 biens qu'aucune erreur ne soit retournée

[psychadelic]

j'avais bien compris que le focus ne se faisait pas,
mais ça peut coincer pour d'autres raisons en amont

[jas789]

Oui, sans code cela est compliqué mais la page contient trop d’éléments confidentiels pour que je la publie sur une discussion publique. En tout cas merci beaucoup de ton aide je vais continuer à chercher.

[psychadelic]

https://developer.mozilla.org/fr/doc...PI/Console/log

[jas789]

Merci pour la piste mais j'ai beau lire et relire je comprends pas vraiment comment cela pour m'aider à focus.
En même temps cela fait très peut de temps que j'essaye de comprendre ce langage et je le cache par je rame terriblement

La seule chose que j'arrive à faire est de retourner la valeur 123456 avec ce code mais impossible de focus par la suite.

Code :

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

console.log('123456')

Et ce code retourne null

Code :

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

document.querySelector("[value='123456']")

[Watilin]

et pourquoi pas document.querySelectorAll( ... ).forEach( ... )

Tu as été trop vite psychadelic

Edit : concernant ce sélecteur :

Code :

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

document.querySelector("[value='123456']")

Je dis peut-être des conneries, mais il me semble que CSS ne sait pas sélectionner les champs de formulaire par leur valeur.

[psychadelic]

Code :

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

document.querySelector("[value='123456']")

Je dis peut-être des conneries, mais il me semble que CSS ne sait pas sélectionner les champs de formulaire par leur valeur.

non, c'est exact
D'ailleurs console.log ( document.querySelector("[value='123456']") ) retourne null ( ou une erreur, je ne me souviens plus pourtant j'avais testé il y a quelques heures ! . de toutes façon cette "solution" est fausse )

[psychadelic]

Oui, sans code cela est compliqué mais la page contient trop d’éléments confidentiels pour que je la publie sur une discussion publique. En tout cas merci beaucoup de ton aide je vais continuer à chercher.

STP relis mieux :

et comme de toute façon on ne sait pas à quoi ressemble la partie html, si ça se passe dans une fenêtre fille ou dans div passant en premier plan, etc... ,

Personne n'a envie de lire tes 10.000 lignes de code, juste les parties révélatrices de ton PB.

[jas789]

Je sais pas si cela peut aider mais voila ce que j'ai réussi à comprendre le bouton modifier apparaitre cette div qui elle recouvre la page.

Code html :

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

<div id="msku-summary-wrapper" class="pad-t15 ">">

Qui elle contient la div ou se trouve mes imputs

Code html :

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

<div id="msku-gridcontainer" class="section highlight pad-t0">

Voici le code avec tous les imputs:

Code html :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  </head>
  <body>
    <div id="msku-bulkedit">
      <div class="act-btn-ph"></div>
      <div class="act-btn" id="act-btn"><br>
        <div>
          <div class="smsg small hide">
            <h2>
              <ul class="lds-error">
              </ul>
            </h2>
          </div>
        </div>
      </div>
    </div>
    <div id="msku-grid-wrapper">
      <div class="grid" id="msku-grid-wrapper-w0">
        <div class="grid-scroll" role="grid">
          <div class="sticky"></div>
          <table class="scroll" style="width: 100%;">
            <thead class="grid-head">
              <tr class="grid-row" role="row">
                <th role="gridcell" class="chk ignr" ignore="1" style="width: 20px;"
 
                  data-children-count="1"><input autocomplete="off" class="grid-chk"
 
                    chkall="true" type="checkbox"></th>
                <th sortby="Actions" role="columnheader" class="act ignr" ignore="1"
 
                  style="width: 150px;">
                  <div title="Actions">Actions</div>
                  <s class="rz" ignore="true" style="margin-left: 160px;"></s></th>
                <th sortby="Photos" role="columnheader" class="pic ignr" ignore="1"
 
                  style="width: 60px;">
                  <div title="Photos">Photos</div>
                  <s class="rz" ignore="true" style="margin-left: 70px;"></s></th>
                <th sortby="Référence article" role="columnheader" class="sku" style="width: 144px;">
                  <div title="Référence article">Référence article</div>
                  <s class="rz" ignore="true" style="margin-left: 154px;"></s></th>
                <th sortby="Code EAN" role="columnheader" ignore="1" class="ean ignr"
 
                  style="width: 173px;">
                  <div title="Code EAN">Code EAN</div>
                  <s class="rz" ignore="true" style="margin-left: 183px;"></s></th>
                <th sortby="Couleur" role="columnheader" style="width: 50px;">
                  <div title="Couleur">Couleur</div>
                  <s class="rz" ignore="true" style="margin-left: 60px;"></s></th>
                <th sortby="code" role="columnheader" style="width: 31px;">
                  <div title="code">code</div>
                  <s class="rz" ignore="true" style="margin-left: 41px;"></s></th>
                <th sortby="Quantité" role="columnheader" class="qty" style="width: 75px;">
                  <div title="Quantité">Quantité</div>
                  <s class="rz" ignore="true" style="margin-left: 85px;"></s></th>
                <th sortby="Prix" role="columnheader" class="prc" style="width: 75px;">
                  <div title="Prix">Prix</div>
                  <s class="rz" ignore="true" style="margin-left: 85px;"></s></th>
                <th class="cell-ph ignr" style="width: 5px;">
                  <div></div>
                  <br>
                </th>
              </tr>
            </thead>
            <tbody class="add-row">
            </tbody>
            <tbody class="grid-body">
              <tr class="grid-row" role="row" msg="0">
                <td role="gridcell" class="chk" data-children-count="1"><input autocomplete="off"
 
                    class="grid-chk" type="checkbox"></td>
                <td role="gridcell" class="act">
                  <div><a action="delete" tabindex="0" role="button" aria-haspopup="">Supprimer</a></div>
                </td>
                <td role="gridcell" class="pic">
                  <div><img src="" style="display:none"></div>
                  <br>
                </td>
                <td role="gridcell" class="sku" ed="1">
                  <div data-children-count="1"><textarea cn="sku"></textarea></div>
                </td>
                <td role="gridcell" class="ean" ed="1"><span class="drp" id="msku-grid-wrapper-w0-w0">
                    <div data-children-count="1"><input value="123456"
 
                        cn="ean" type="text"><a class="pull-down" href="javascript:;"
 
                        role="button" aria-haspopup="true"><i></i></a></div>
                    <ul role="menu">
                      <li role="option"><a val="" href="javascript:;" role="menuitem">Saisissez
                          le code UPC/EAN/ISBN</a></li>
                      <li role="option"><a val="Non applicable" href="javascript:;"
 
                          role="menuitem">Non applicable</a></li>
                    </ul>
                  </span></td>
                <td role="gridcell">
                  <div title="Argenté">Argenté</div>
                </td>
                <td role="gridcell">
                  <div title="1">1</div>
                </td>
                <td role="gridcell" class="qty" ed="1">
                  <div data-children-count="1"><input value="1" cn="qty" type="text"></div>
                </td>
                <td role="gridcell" class="prc" ed="1">
                  <div data-children-count="1"><input value="1,00" cn="prc" type="text"></div>
                </td>
                <td class="cell-ph">
                  <div></div>
                  <br>
                </td>
              </tr>
              <tr class="hide grid-msg">
                <td class="cell-ph" colspan="10">
                  <div class="inmsg">
                    <ul>
                    </ul>
                  </div>
                  <br>
                </td>
              </tr>
              <tr class="grid-row" role="row" msg="0">
                <td role="gridcell" class="chk" data-children-count="1"><input autocomplete="off"
 
                    class="grid-chk" type="checkbox"></td>
                <td role="gridcell" class="act">
                  <div><a action="delete" tabindex="0" role="button" aria-haspopup="">Supprimer</a></div>
                </td>
                <td role="gridcell" class="pic">
                  <div><img src="" style="display:none"></div>
                  <br>
                </td>
                <td role="gridcell" class="sku" ed="1">
                  <div data-children-count="1"><textarea cn="sku"></textarea></div>
                </td>
                <td role="gridcell" class="ean" ed="1"><span class="drp" id="msku-grid-wrapper-w0-w1">
                    <div data-children-count="1"><input value="101010" cn="ean"
 
                        type="text"><a class="pull-down" href="javascript:;" role="button"
 
                        aria-haspopup="true"><i></i></a></div>
                    <ul role="menu">
                      <li role="option"><a val="" href="javascript:;" role="menuitem">Saisissez
                          le code UPC/EAN/ISBN</a></li>
                      <li role="option"><a val="Non applicable" href="javascript:;"
 
                          role="menuitem">Non applicable</a></li>
                    </ul>
                  </span></td>
                <td role="gridcell">
                  <div title="Beige">Beige</div>
                </td>
                <td role="gridcell">
                  <div title="2">2</div>
                </td>
                <td role="gridcell" class="qty" ed="1">
                  <div data-children-count="1"><input value="1" cn="qty" type="text"></div>
                </td>
                <td role="gridcell" class="prc" ed="1">
                  <div data-children-count="1"><input value="1,00" cn="prc" type="text"></div>
                </td>
                <td class="cell-ph">
                  <div></div>
                  <br>
                </td>
              </tr>
              <tr class="hide grid-msg">
                <td class="cell-ph" colspan="10">
                  <div class="inmsg">
                    <ul>
                    </ul>
                  </div>
                  <br>
                </td>
              </tr>
              <tr class="grid-row" role="row" msg="0">
                <td role="gridcell" class="chk" data-children-count="1"><input autocomplete="off"
 
                    class="grid-chk" type="checkbox"></td>
                <td role="gridcell" class="act">
                  <div><a action="delete" tabindex="0" role="button" aria-haspopup="">Supprimer</a></div>
                </td>
                <td role="gridcell" class="pic">
                  <div><img src="" style="display:none"></div>
                  <br>
                </td>
                <td role="gridcell" class="sku" ed="1">
                  <div data-children-count="1"><textarea cn="sku"></textarea></div>
                </td>
                <td role="gridcell" class="ean" ed="1"><span class="drp" id="msku-grid-wrapper-w0-w2">
                    <div data-children-count="1"><input value="123123" cn="ean"
 
                        type="text"><a class="pull-down" href="javascript:;" role="button"
 
                        aria-haspopup="true"><i></i></a></div>
                    <ul role="menu">
                      <li role="option"><a val="" href="javascript:;" role="menuitem">Saisissez
                          le code UPC/EAN/ISBN</a></li>
                      <li role="option"><a val="Non applicable" href="javascript:;"
 
                          role="menuitem">Non applicable</a></li>
                    </ul>
                  </span></td>
                <td role="gridcell">
                  <div title="Blanc">Blanc</div>
                </td>
                <td role="gridcell">
                  <div title="2">2</div>
                </td>
                <td role="gridcell" class="qty" ed="1">
                  <div data-children-count="1"><input value="1" cn="qty" type="text"></div>
                </td>
                <td role="gridcell" class="prc" ed="1">
                  <div data-children-count="1"><input value="1,00" cn="prc" type="text"></div>
                </td>
                <td class="cell-ph">
                  <div></div>
                  <br>
                </td>
              </tr>
              <tr class="hide grid-msg">
                <td class="cell-ph" colspan="10">
                  <div class="inmsg">
                    <ul>
                    </ul>
                  </div>
                  <br>
                </td>
              </tr>
            </tbody>
          </table>
          <div class="sticky-scroll">
            <div>-</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Ce que je cherche précisément à faire:
Rechercher dans la colonne EAN la value 123456 pour par la suite focus la case quantité lui correspondant enlever 1 de stock par rapport à la valeur existante puis cliquer sur un bouton valider.
Je pense donc que l'erreur vient de div soit cachée de base bien qu'elle apparaisse cependant au clic sur le bouton modifier.
Car toutes mes commandes marches sur la page principale mais impossible de faire fonctionner une commande sur cette div.
Je n'ai jamais rencontré ce problème et je suis totalement perdu.
Pourtant j'ai parcouru des centaines de pages google en Français et Anglais mais rien n'y fait.

En vous remerciant par avance pour votre aide.

[NoSmoking]

Bonjour,

non, c'est exact
D'ailleurs console.log ( document.querySelector("[value='123456']") ) retourne null ( ou une erreur, je ne me souviens plus pourtant j'avais testé il y a quelques heures ! . de toutes façon cette "solution" est fausse )

le sélecteur "[value='123456']", pour peu que l'on n'omette pas de mettre les quottes, est tout à fait valide.
Si on obtient en retour null c'est que l'élément n'a pas était trouvé sinon on aurait une erreur du type « is not a valid selector ».

Dans le cas présent et au dire de jas789

Et ce code retourne null

Code :

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

document.querySelector("[value='123456']")

il y a peu de chance que l'élément soit dans le document au moment de l'appel, peut être un chargement Ajax de la page ou, comme évoqué, l'élément appartiendrait au contenu d'une <iframe>.
Ce point est donc à préciser.

Une remarque en passant un élément ne peut prendre le focus que si il est « focusable », en d'autre terme si il est visible dans la page, dans le cas contraire il ne prendra pas le focus.

[Watilin]

Bon. Tout ça n’était pas clair alors j’ai fait des tests.

Comme NoSmoking l’a dit, s’il n’y a pas les « quottes » (les guillemets), le sélecteur est invalide.

Code console :

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

1
2
>> document.querySelector("input[value=123456]")
SyntaxError: 'input[value=123456]' is not a valid selector

Si l’input a un attribut value inscrit en dur dans le code html dès le départ, la sélection fonctionne.

Code html :

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

<input value="123456" />

Code :

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

document.querySelector("input[value='123456']") // ok

Si l’utilisatrice ou l’utilisateur change la valeur de l’input pour y mettre, par exemple, « 789 », deux choses à constater :

1. le sélecteur "input[value='789']" ne renvoie rien
2. le sélecteur "input[value='123456']" fonctionne toujours

Et là on touche à une différence subtile mais importante entre l’attribut value="..." du code HTML, et la propriété dynamique .value donnée par le DOM.

Code console :

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

1
2
3
4
>> oInput.value
"789"
>> oInput.getAttribute("value")
"123456"

Quand l’utilisatrice ou l’utilisateur change la valeur de l’input, la propriété .value change, mais l’attribut value= ne change pas. C’est pour cette raison que le sélecteur CSS ne peut pas trouver un champ via sa valeur dynamique.

@psychadelic : dans mon précédent post j’avais suggéré qu’une erreur se cachait dans ta proposition document.querySelectorAll( ... ).forEach( ... ) en espérant que tu réagirais vite… Mais tu n’as pas relevé
Donc tant pis pour César, je révèle le secret de ce mystère insondable : querySelectorAll( ... ) n’est pas un tableau, il n’y a pas de méthode forEach.

Une boucle for … of fonctionnera :

Code :

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

1
2
3
4
5
for (let el of document.querySelectorAll('input')) {
  if ("123456" === el.value) {
    el.focus();
  }
}

Avec peut-être un break à rajouter pour les cas où plusieurs <input> ont la valeur recherchée.

[NoSmoking]

...j’avais suggéré qu’une erreur se cachait dans ta proposition document.querySelectorAll( ... ).forEach( ... ) en espérant que tu réagirais vite… Mais tu n’as pas relevé
Donc tant pis pour César, je révèle le secret de ce mystère insondable : querySelectorAll( ... ) n’est pas un tableau, il n’y a pas de méthode forEach.

On peut tout à fait le faire si on excepte IE : NodeList.prototype.forEach()

[Watilin]

On peut tout à fait le faire si on excepte IE : NodeList.prototype.forEach()

Oh. J’ai appris un truc. Merci

[jas789]

Une remarque en passant un élément ne peut prendre le focus que si il est « focusable », en d'autre terme si il est visible dans la page, dans le cas contraire il ne prendra pas le focus.

NoSmoking Je te confirme que l'élément est bien "focusable" au moment où j'exécute le code dans la console.

On peut tout à fait le faire si on excepte IE : NodeList.prototype.forEach()

J'ai simplement besoin que le script soit compatible avec Firefox donc aucun problème cependant je n'arrive pas à faire fonctionner node List.ForEach car elle me retourne des erreurs de syntaxe mais je vais essayer de se coter la.

[jas789]

Bon. Tout ça n’était pas clair alors j’ai fait des tests.

Si l’input a un attribut value inscrit en dur dans le code html dès le départ, la sélection fonctionne.

Code html :

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

<input value="123456" />

Code :

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

document.querySelector("input[value='123456']") // ok

Si l’utilisatrice ou l’utilisateur change la valeur de l’input pour y mettre, par exemple, « 789 », deux choses à constater :

1. le sélecteur "input[value='789']" ne renvoie rien
2. le sélecteur "input[value='123456']" fonctionne toujours

Et là on touche à une différence subtile mais importante entre l’attribut value="..." du code HTML, et la propriété dynamique .value donnée par le DOM.

Code console :

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

1
2
3
4
>> oInput.value
"789"
>> oInput.getAttribute("value")
"123456"

Quand l’utilisatrice ou l’utilisateur change la valeur de l’input, la propriété .value change, mais l’attribut value= ne change pas. C’est pour cette raison que le sélecteur CSS ne peut pas trouver un champ via sa valeur dynamique.

Watilin la valeur cherchée ne sera jamais modifiée par l’utilisateur et en effet celle-ci est bien présente dans le code sous la forme:

Code :

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

<input type="text" value="123456" cn="ean">

Une boucle for … of fonctionnera :

Code :

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

1
2
3
4
5
for (let el of document.querySelectorAll('input')) {
  if ("123456" === el.value) {
    el.focus();
  }
}

Avec peut-être un break à rajouter pour les cas où plusieurs <input> ont la valeur recherchée.

En effet quand j'ouvre le bout de code HTML que j'ai fourni en hors ligne ton code fonctionne parfaitement. Cependant à mon grand désespoir celui-ci encore une fois ne fonctionne pas sur mon site. De plus je te confirme que le code 123456 sera dans aucun cas présent 2 fois dans la page.

[Watilin]

celui-ci encore une fois ne fonctionne pas sur mon site.

As-tu un message d’erreur dans la console ?