Accéder à une page spécifique d'un saas intranet
Bonjour tout le monde,
Je suis bloqué depuis des jours sur un sujet. :triste:
Je précise que je suis un gros débutant en javascript et je peux très bien passer à côté de choses évidentes :oops:
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:
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:
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:
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:
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
