Discussion :

[lemoussel]

Avec cet exemple de code HTML

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form action="/signup.php" class="signup" method="post">
    <div class="field">
        <input type="text" class="text-input" autocomplete="off" name="user[name]" maxlength="20" placeholder="Nom complet">
    </div>
    <div class="field">
        <input type="text" class="text-input email-input" autocomplete="off" name="user[email]" placeholder="Email">
    </div>
    <div class="field">
        <input type="password" class="text-input" name="user[user_password]" placeholder="Mot de passe">
    </div>
    <button type="submit" class="btn signup-btn">
        S'inscrire
    </button>
</form>

je voudrais déterminer, via des requêtes XPath, pour chaque champ de type <input> le voisin de gauche, de droite, celui au dessus et celui en dessous.
L'idée étant que je voudrais déterminer/trouver un champ par rapport à son voisinage.


Pour ce faire, je pense que cela doit être possible avec les commandes XPath suivantes :

• voisin de droite (to-right-of) : following-sibling
• voisin de gauche (to-left-of) : preceding-sibling
• au dessus (above) : parent
• en dessous (below ) : child

De ce que je j'ai pu glaner sur la toile, cela n'est pas très explicite sur l'utilisation de ces commandes.
Bref je ne vois pas comment utiliser correctement ces commandes.

Merci de votre aide.

[tsuji]

Browsers qui supportent dom supportent plupart ou tout le dom noyeau 1. Dans dom noyau - Node interface, vous avez propriétés publiques : parentNode (vous diriez au desus), previousSibling (vous diriez voisin de gauche), childNodes (vous diriez déscendants, mais pas), nextSibling (vous diriez voisin de droite). Ils ont normalement leur contre-partie de méthode propriétaire aussi (getParentNode() etc...). Cheque browser a son rendrement spécifique qui n'est pas forcément la même que les autres. Ce sont parfois un problème très grave pour les utilisateurs.

Dom noyau 1 :
http://www.w3.org/TR/REC-DOM-Level-1...-one-core.html
Regardez la section "Interface Node" en particulier.

Tout ça, c'est très bien; mais ce n'est pas XPath. Et là, le support n'est loins d'être normalisé pour des raisons probablement politiques malheureuses. C'est pour ça, il y des bibliothèques/frameworks qui essayent porter de remède.

Un récent avancement sur le support uniformisé parmi d'autres sur les browsers est celui de xpathjs d'Andrej Pavlovic.
https://github.com/andrejpavlovic/xpathjs
Avec ça, vous pouvez profiter le plein support de xpath. Je l'ai testé un peu, et il semble bien performant.

Voilà un peu d'éléments pour un sujet vaste si vous ne portez aucune spécificité desus.

[lemoussel]

Je vous remercie de votre éclairage sur ces différents aspects relatifs à XPath.

J'utilise Chrome comme navigateur. Ce navigateur supportant parfaitement la syntaxe XPath 1.0. Il est aussi a remarquer que Chrome supporte les requêtes XPath dans la console JavaScript avec la syntaxe

Code :

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

$x("Requete XPath")

Le plus difficile étant d'écrire les requêtes XPath d'ou ma question.

[tsuji]

Si vous voulez expérimenter xpath avec Chrome javascript console, ça va et c'est aussi éducatif : profitez-le.

Puisque la structure de l'input de la forme est elle-même un peu pauvre : elle ne peut y avoir de déscendant, et la structure de sibling n'est presque rien, je propose de mettre un peu de plus autour de la première input pourque vous voulez les retournes un peu plus riche.

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
<form action="/signup.php" class="signup" method="post">
    <div class="field">
        <div>first input</div>
        <div>some description</div>
        <input type="text" class="text-input" autocomplete="off" name="user[name]" maxlength="20" placeholder="Nom complet">
        <p>some paragraph</p>
    </div>
    <div class="field">
        <input type="text" class="text-input email-input" autocomplete="off" name="user[email]" placeholder="Email">
    </div>
    <div class="field">
        <input type="password" class="text-input" name="user[user_password]" placeholder="Mot de passe">
    </div>
    <button type="submit" class="btn signup-btn">
        S'inscrire
    </button>
</form>

Vous pouvez expérimenter les xpath's typiques comme ça.

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
$x('//form/input/parent::*')
$x('//form/input/preceding-sibling::*')
$x('//form/input/following-sibling::*')
$x('//form/input/preceding-sibling::text()')
$x('//form/input/descendant::*')
$x('//form/input/ancestor::*')
$x('//form/input/ancestor::*')
$x('//form/input/preceding::*')
$x('//form/input/following::*')
 
$x('(//form/input)[1]/parent::*')
$x('(//form/input)[1]/preceding-sibling::*')
$x('(//form/input)[1]/following-sibling::*')
$x('(//form/input)[1]/preceding-sibling::text()')
$x('(//form/input)[1]/ancestor::*')
$x('(//form/input)[1]/preceding::*')
$x('(//form/input)[1]/following::*')

etc etc...

[lemoussel]

tsuji, pour plus de complexité je te propose de tester/m'expliquer avec la page Yahoo Finance suivante : http://finance.yahoo.com/q?s=EURUSD=X

Avec tes exemples nous obtenons :

pour le texte EUR/USD (EURUSD=X) le voisin de droite (to-right-of) = "CCY"

Code :

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

.//h2[text()="EUR/USD (EURUSD=X)"]/following-sibling::*[1]

pour le texte "CCY" le voisin de gauche (to-left-of) = "EUR/USD (EURUSD=X)"

Code :

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

.//span[text()="CCY "]/preceding-sibling::*[1]

Pour le texte "1.3588" au dessus (above) = "EUR/USD (EURUSD=X)"

Code :

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

Pas réussi à trouver la requête XPath correspondante.

Pour le texte "EUR/USD (EURUSD=X)" en dessous (below ) = "1.3588"

Code :

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

Pas réussi à trouver la requête XPath correspondante.

[tsuji]

J'ai jeté un coup d'oeil du page...

Pour le texte "1.3588" au dessus (above) = "EUR/USD (EURUSD=X)"

Ceci devrait résulter ce qu'on cherche.

Code :

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

$x('//span[normalize-space()="1.3588"]/ancestor::div[1]/preceding-sibling::div[1]/div/h2')

Pour le texte "EUR/USD (EURUSD=X)" en dessous (below ) = "1.3588"

Code :

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

$x('//h2[normalize-space()="EUR/USD (EURUSD=X)"]/ancestor::div[@class="hd"][1]/following-sibling::div[1]/descendant::span[@id="yfs_l10_eurusd=x"]')

Je ne fais pas exacte mirroir inverse l'une par rapport à l'autre pour illustrer le fait que le xpath n'est jamais unique en écriture dictée par je ne sais pas quelle loi, non, on peut l'écrire d'après les infos qu'on possède.

[lemoussel]

Merci de ces exemples, Fort éducatif.

Pense tu qu'il soit possible de rendre ces requêtes XPATH plus génériques ?
c'est à dire de dépendre le moins possible des balises
comme par exemple

Code :

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

$x('//span[normalize-space()="1.3588"]/ancestor::*/preceding-sibling::*/text()')

Rem : la requête ci-dessus ne donne pas le bon résultat.
Ce n'est pas grave si la requête retourne plusieurs éléments. L'essentiel est que la valeur attendue soit en première position car le résultat est analysé dans un Prg C# qui prend la première valeur.

[tsuji]

Il est tout à fait légit de concevoir la requête xpath qui soit la plus générique possible. Mais, c'est relative. Générique ici prend le sens que les paramètres réferenciés soient moins susceptibles de changer en temps aussi longtemps que la page ne soit pas renouvellé en sa conception entière.

Par exemple, le point de départ avec 1.3588 ne serait jamais considéré générique pour une page dynamique parce que la valeur d'échange monétaire varie.

Je me permets d'avancer id="yfi_rt_quote_summary" est plus générique et que class="time_rtq_ticker" et class="title" aussi mais du degré moins parce que les derniers sont liés au css qui est plus susceptible à changer dans le temps. En tout cas, les requêtes comme ça sont plus génériques.

Code :

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

1
2
3
$x('//div[@id="yfi_rt_quote_summary"]//div[@class="title"]/h2')
 
$x('//div[@id="yfi_rt_quote_summary"]//div[@class="yfi_rt_quote_summary_rt_top"]//span[@class="time_rtq_ticker"]/span')