Discussion :

[Gorzyne]

Bonjour tout le monde,

Je suis bloqué depuis des jours sur un sujet.
Je précise que je suis un gros débutant en javascript et je peux très bien passer à côté de choses évidentes

Mon objectif est d'accéder à une page spécifique d'un saas intranet (js/css/html5) avec derrière des sources jquery, react, aria... et un schéma json pour la data, l'url est figée, il y a bien une url derrière pour l'appel réseau mais je me heurte à une erreur 401 quand je veux naviguer à cette adresse

Le point de départ est une page de garde. Il y a un tableau, chaque ligne permet d'accéder à une page spécifiqu, il doit y avoir 800 lignes, et on affiche 7 lignes par défaut.

Pour accéder à cette page j'ai trouvé un moyen mais qui est fastidieux, c'est de parcourir tout mon tableau, si je trouve pas ma ligne je charge plus de lignes jusqu'à ce que je trouve la bonne ligne pour accéder à la page qui m'intéresse.
Ca fonctionne mais ça prend beaucoup trop longtemps.

- J'ai essayé d'écouter les appels réseaux, mais je n'ai pas été capable de les reproduire.

Je voudrais utiliser la barre de recherche de la page d'accueil. A l'issue de la recherche le tableau n'affiche qu'une ligne, la bonne est l'accès est immédiat.
Sauf que je n'arrive pas à piloter ce contrôle.

J'ai essayé d'adresser aux différentes profondeur du contrôle, de mettre les bubbles, de déclencher les événements input, change... rien n'y fait


Pour l'instant j'arrive à obtenir le focus dans la box mais quand je modifie la value, elle n'apparaît pas dans le html. Elle apparait visuellement sur la page mais disparait dès que je sors.


Quand on procède manuellement
- on entre dans la barre de recherche
- dès qu'on tape un premier caractère il y a une listbox qui s'affiche
- on peut cliquer dans la liste box ou se déplacer avec les flèches et appuyer sur entrée, le tableau se met alors à jour

Je travaille avec la console des outils développeurs (sous Edge).
- Jusqu'à présent j'arrive à obtenir le focus dans ma barre de recherche
- J'arrive à modifier visuellement la valeur (en javascript pur ou en jquery) mais celle ci n'apparait pas dans le html
- Je n'arrive pas à faire apparaître la liste déroulante
- Quand la liste déroulante est apparente, j'arrive à simuler le click dessus.

J'ai mis des écouteurs d’évènements sur le clavier la souris le contrôle le fetch/xhr, ça m'emmène dans des fonctions compactées avec des objets complexes en arguments.
J'ai bien un évenement qui se déclenche au 'change' mais je n'arrive pas à émuler le change


Voici mon script

Code :

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
var combobox = document.getElementById('my_control_id');
 
var focusEvent = new Event('focus', {
  bubbles: true,
  cancelable: true
});
combobox.dispatchEvent(focusEvent);
//OK jusqu ici j'obtiens le focus
setTimeout(function() {
  combobox.value = '11111'; //la valeur apparaît visuellement mais ne vient pas dans le html et la liste déroulante n'apparait pas
 
  var inputEvent = new Event('input', {
    bubbles: true,
    cancelable: true
  });
  combobox.dispatchEvent(inputEvent);
 
  var changeEvent = new Event('change', {
    bubbles: true,
    cancelable: true
  });
  combobox.dispatchEvent(changeEvent);
}, 100); // Attend 100 ms avant de modifier la valeur de la combobox

Voici le snippet html de la zone du contrôle (barre de recherche)

Code html :

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

1
2
3
4
5
6
7
8
9
<div style="flex-grow: 0; max-width: 45%; flex-basis: 45%; min-width: 220px; margin-right: 24px;">
<div style="flex-grow: 1; margin-bottom: 24px; width: 100%;">
<div role="combobox" aria-haspopup="listbox" aria-owns="react-autowhatever-1" aria-expanded="false" style="position: relative;">
<div style="display: flex; align-items: flex-end;"><div style="display: flex; width: 100%;"><span style="position: relative; width: 100%;">
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-marginNormal" aria-autocomplete="list" aria-controls="react-autowhatever-1" style="width: 100%;">
<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink Mui-focused Mui-focused" data-shrink="true" style="white-space: nowrap;">Product name</label>
<div class="MuiInputBase-root MuiInput-root MuiInput-underline Mui-focused Mui-focused MuiInputBase-formControl MuiInput-formControl"><input aria-invalid="false" autocomplete="off" id="my_control_id" placeholder="" type="text" maxlength="255" class="MuiInputBase-input MuiInput-input" value="">
</div></div></span></div></div>
<div data-testid="suggestion-container"><div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" id="react-autowhatever-1" style=""></div></div></div></div></div>

Quand la liste déroulante apparaît le snippet ressemble à ça

Code html :

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

1
2
3
4
5
<div data-testid="suggestion-container">
<div class="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded" id="react-autowhatever-1" style="position: absolute; z-index: 1102; left: 0px; right: 0px;">
<ul role="listbox" style="margin: 0px; padding: 0px; list-style-type: none;"><li role="option" id="react-autowhatever-1--item-0" aria-selected="false" data-suggestion-index="0" style="display: block; width: 100%;">
<div class="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button" tabindex="-1" role="menuitem" aria-disabled="false" data-testid="suggestion-item">Le code qui m intéresse<span class="MuiTouchRipple-root">
</span></div></li></ul></div></div>

et le script suivant me permet de sélectionner le premier élément de la liste seulement si celle ci est apparente

Code :

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

1
2
var suggestionItem = document.querySelector("#react-autowhatever-1--item-0");
suggestionItem.click();

Je souhaite pouvoir donc trouver le script qui me permet de lancer la recherche de bout en bout, le point bloquant étant de faire apparaître la liste déroulante, et par extension de rentrer la valeur qui déclenche l'apparition de cette liste.

Évidemment je continue la recherche je continue la recherche appel réseau mais je me heurte à des histoires compliqué de droits, le sso étant désactivé par défaut en configuration client, et je maîtrise mal ces sujets

Merci beaucoup pour les éléments de réponses qui me permettraient d'avancer

[mathieu]

je me demande si ça ne serait pas plus efficace d'essayer la piste de la lecture directe de l'url.
regardez tous les paramètres envoyés dans la requête http ainsi que les cookies, peut-être qu'un jeton de connexion est utilisé.

[Gorzyne]

ouais j'ai essayé par là, avec le Beaver et l'url de l'API j'arrive à afficher le Json dans le log mais quand je veux naviguer à l'url je me fais jeter erreur 401 accès non autorisé
et puis y a la problématique de récupérer le Beaver, je sais pas si c'est facile à faire en JS

subsidiairement j'ai remarqué sur d'autres contrôles que je pouvais me faire jeter par le navigateur par exemple sur les boutons d'upload de file apparemment on peut rien faire et il y a également des fenêtres de confirmation de suppression qui vienne directement du navigateur et pas du site, pour lequel l'injection js ne peut rien.

la solution de contournement que j'ai trouvée pour l'instant consiste à simuler les clicks souris avec la user32.dll (mouse_event) aux coordonnées X, Y via une application externe maison (la même qui gère mes injections JS) mais le problème est celui de la portabilité, même si les environnements de mes utilisateurs sont standardisés, les environnements vont toujours avoir des variations qui nécessitent un calibrage des positions X,Y des emplacements souris, c'est fastidieux à expliquer ce sont des utilisateurs à niveau de technicité faible.

j'ai voulu essayer de repérer automatiquement les positions X, Y via le retour de fonction JS mais je n'arrive pas à faire coïncider la coordonnée écran avec la coordonnée du contrôle dans la page. J'ai l'impression que JS est capable de me sortir la position d'un élément relative au bord de la page web, de l'autre côté je sais localiser la position du navigateur mais j'ai un gap quand j'essaie de réconcilier mes positions. J'ai également de légers écarts dans mes dimensions de fenêtre entre ce que sors JS et la réalité... bref même de ce côté ça coince c'est dommage

- piloter le contrôle : ko l'event voulu ne se trigger pas
- appeler la fonction keyevent de la source sous jacente : ko pas réussi
- simuler un appel réseau : ko accès non autorisé
- repérer la position écran du contrôle : ko écart avec le réel

[Gorzyne]

Problème résolu
J'ai finalement réussi à piloter la barre de recherche
J'ai pu déclencher un event handler de react Js, le handler est dynamique mais une petite recherche startwith permet de le récupérer
avec ça, tout fonctionne nickel mais j'ai galéré pendant des semaines