"Navigation" sur un site

[Sergent-Quentin]

Bonjours à tous

Avec... Actiona on peut naviguer sur un site simulant les actions clics, clavier, etc...

Et j'ai été en train de penser si il y était possible ( je suis quasi-sûr que oui ) de naviguer sur un site sans même simuler des actions clics ou autre, un script qui permettrait d'interagir avec le serveur ( je crois que c'est ça ).

Exemple :

Voici un site assez connu :
http://www.leboncoin.fr/

Quand vous arrivez sur la page d’accueil vous avez ceci :

France.jpg (23.38 KiB) Viewed 5333 times

Là c'est très simple, il suffit de cliquer sur la région de notre choix, on va prendre "Rhône-Alpes".
Mais le truc qui serait intéressant ça serait que le script envoi la réponse au serveur(Ou autre) pour passer à la page suivante.
Ce choix se fera par l'action "Entrée de donnée" stocker par une variable que l'utilisateur aura rentrer avant d’exécuter le script :

Region.jpg (6.27 KiB) Viewed 5333 times

Ensuite avec plus ou moins même principe, le script cherchera un produit ( toujours définit par l'utilisateur, logique ) et consultera les résultats obtenus, voir même filtrer les résultats avec des mots. Pour les résultats ils pourraient êtres stockées dans un fichier texte ( Prix : 400 €, etc... )

Resumé

- L'utilisateur entrera les données sous forme de variable ( image ci-dessus )
- Le script pré-programmé se charge du reste

Voilà tout

Si un script comme ça ne prend pas longtemps à faire je le voudrais bien volontiers svp ( cela me donnerai un exemple pour apprendre )

Si un tuto pour débutant qui me permettrait de faire ce genre de choses je suis preneur aussi svp

Je vous remercie

Cordialement

Sergent-Quentin

[Violette]

Ahahah bon pour faire court, c'est possible, "complexe" mais possible.

Il est possible d'envoyer des URL avec Actiona et de récupérer le résultat. J'ai jamais test et j'ai un peu la flemme là mais je présume qu'avec cette méthode, si l'URl est une simple page, le résultat renvoyé.toText() sera le code source de cette page.

Donc en développant un petit crawler chargé de parser la page récupérée, il est aisé de récupérer le contenu recherché.

Le prérequis étant de construire la bonne URL. J'ai regardé vite fait, les requêtes sont envoyées en GET avec un format assez facile à reproduire (ex: http://www.leboncoin.fr/voitures/offres ... q=poubelle).

Clairement le plus dur dans l'histoire c'est le crawler, m'enfin je dit ça j'ai juste vérifié vite fait la tronche du HTML renvoyé, ça a pas l'air trop degueu.

Peut être existe t'il une API (apparemment non ou pas public du moins) ou un truc quelconque pour récupérer les infos recherchés autres que le parse de la page j'en sait trop rien.

Si un script comme ça ne prend pas longtemps à faire je le voudrais bien volontiers svp ( cela me donnerai un exemple pour apprendre )

Trop long pour moi dsl.

Si un tuto pour débutant qui me permettrait de faire ce genre de choses je suis preneur aussi svp

Ben du JS, du JS, et encore du JS ^^. Tableau (concordance entre la donnée rentré par l'utilisateur et celle attendu par le serveur) et concaténation pour la construction de l'URL.
Recherche dans le DOM/Regex pour le crawler.

Après pour l'envoie de la requête et récupération du résultat, ainsi que le rendu de l'information dans un fichier texte, ben wiki d'Actiona.

Bon courage !

[Sergent-Quentin]

Bon courage !

Merci de m'avoir répondu et donner certains détails qui vont m'aider , c'est peut-être un peu plus compliqué que je pensais ^^

Mais je vais toutefois essayer

Je vous tiens au courant de mes progrès

Merci beaucoup

[Sergent-Quentin]

Bon

Ce matin je fais un petit script simplet :

- Il télécharge les données d'une adresse web ( code source )
- Écrit ce code source dans un fichier texte
- Lit le fichier texte
- Puis cherche un mot spécifique ( Pas encore au point )

Ce que je n'arrive pas à faire :

- Relever l'adresse internet actuelle
- Chercher un mot/une phrase dans la code source de façon précise ( ex : Ligne 818, Colonne 33 à 55 )

Remarque : J'ai essayer de trouver un mot avec lire fichier texte mais on ne peut pas dépasser la ligne 99 sauf si c'est fait par une variable

[Violette]

- Relever l'adresse internet actuelle

Euh, je comprend pas ce que tu veux dire par actuelle, je pense que tu veux dire l'adresse que te renvoie le serveur. Mais le serveur te renvoie aucune adresse, juste une page HTML.
Quand tu sélectionnes des options, style prix mini, prix max, nom de l'item recherché, etc, cela va rajouter des paramètres à l'URL (ou changer sa route), qui est ensuite l'URL actuelle. L'URL actuelle c'est celle que tu construits, à toi de justement voir comment elle se construit, tel truc rajoute tel paramètre, si je veux une voiture l'URL c'est x, si c'est une location, alors c'est y, si la location à un prix mini alors il faut rajouter tel paramètre avec tel valeur, etc. Je sais pas trop comment t'expliquer voir même si c'est vraiment ça ta question m'enfin bon.

Pour connaitre les différentes routes, paramètres, c'est très simple, soit tu regardes le code source du bloc Chercher, soit tu tests et tu regardes ce qui change entre l'URL "de base" et l'URL "avec options". Ça peut être un peu long et laborieux de tout récupérer, mais c'est le seul moyen ^^.

- Chercher un mot/une phrase dans la code source de façon précise ( ex : Ligne 818, Colonne 33 à 55 )

Manipulation du DOM

T'auras à priori pas trop de soucis à récup ce qu tu as besoin, le dom est propre. Tu commences par récupérer le contenu de la div list-lbc, puis c'est un lien par item.

screen-lbc.png (207.59 KiB) Viewed 5325 times

Je sais pas trop quoi te dire de plus pour t'aider.

[Sergent-Quentin]

Euh, je comprend pas ce que tu veux dire par actuelle, je pense que tu veux dire l'adresse que te renvoie le serveur. Mais le serveur te renvoie aucune adresse, juste une page HTML.

En faite je parlais de l'adresse qui se trouve dans la barre du navigateur ^^

Pour le reste je suis sur ton lien, je te tiens au courant

Merci beaucoup pour ton aide

[Sergent-Quentin]

J'ai regarder pour la manipulation du DOM et au risque de passer pour un idiot je n'arrive pas du tout à créer un script pour "lire" les données que je voudrais obtenir

J'ai compris comment trouver les données que je voulais ( encore heureux ) mais pour les récupérer, je suis totalement perdu ^^

Pourrait-tu, stp ( et si tu veux bien ^^ ), me faire un script récupérer tout simplement la date d'un produit et la stocker sous forme de variable :

Exemple.jpg (74.6 KiB) Viewed 5323 times

Merci infiniment.

[Violette]

Bon en fait je suis un peu bête j'avais complètement oublier que document n'est pas valide donc rip la manipulation du DOM pour la pêche aux infos. Ce qui signifie une seule chose : REGEX !

Pour un bout de code d'exemple, ok je te ferais ça demain.

[Sergent-Quentin]

^^

Je connais pas du tout ^^

Dac pour le code d'exemple je voudrais bien stp

Merci à toi

[Violette]

Bon voilà la regex pour récup la date.

Code: Select all

var re = /<a.*title="(.*)"[\s|\S]*?class="lbc"[\s|\S]*?class="date"[\s|\S]*?<div>(.*)<\/div>[\s|\S]*?<div>(.*)<\/div>/g;

var str = '\n\n <div class="list-lbc">\n <a href="http://www.leboncoin.fr/voitures/720859541.htm?ca=20_s" title="Alfa 159 sport 180 ch reprog, AV avant reprise">\n <div class="lbc">\n <div class="date">\n <div>20 oct</div>\n <div>00:02</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.196.60/thumbs/24a/24a46dbb902bac860483d8abae0222448bcc65ee.jpg" alt="Alfa 159 sport 180 ch reprog, AV avant reprise">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">1</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Alfa 159 sport 180 ch reprog, AV avant reprise\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Saint-Aubin-du-Plain\n \n /\n \n \n \n     Deux-Sèvres\n                                        \n \n </div>\n\n \n \n <div class="price">\n 7 500&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/720095364.htm?ca=20_s" title="206">\n <div class="lbc">\n <div class="date">\n <div>18 oct</div>\n <div>11:18</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.197.50/thumbs/5e5/5e5d22c9da75e7f88c053e679c1b6a6fa7c75187.jpg" alt="206">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n 206\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Bressuire\n \n /\n \n \n \n     Deux-Sèvres\n                                        \n \n </div>\n\n \n \n <div class="price">\n 2 500&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/710592042.htm?ca=20_s" title="Alfa romeo 156 1.8 TS">\n <div class="lbc">\n <div class="date">\n <div>24 sept</div>\n <div>20:19</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.196.30/thumbs/377/377424087016373.jpg" alt="Alfa romeo 156 1.8 TS">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Alfa romeo 156 1.8 TS\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n L\'Eguille\n \n /\n \n \n \n     Charente-Maritime\n                                        \n \n </div>\n\n \n \n <div class="price">\n 2 000&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/709865085.htm?ca=20_s" title="Jolie m&eacute;gane coup&eacute;">\n <div class="lbc">\n <div class="date">\n <div>23 sept</div>\n <div>08:04</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.197.60/thumbs/357/357422085060973.jpg" alt="Jolie m&eacute;gane coup&eacute;">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Jolie m&eacute;gane coup&eacute;\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Beauvais-sur-Matha\n \n /\n \n \n \n     Charente-Maritime\n                                        \n \n </div>\n\n \n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/709482792.htm?ca=20_s" title="Bmw 530DA E60 Pack Luxe ou &eacute;change ">\n <div class="lbc">\n <div class="date">\n <div>22 sept</div>\n <div>11:25</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.196.60/thumbs/353/353422085864941.jpg" alt="Bmw 530DA E60 Pack Luxe ou &eacute;change ">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Bmw 530DA E60 Pack Luxe ou &eacute;change \n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Châteauneuf-sur-Charente\n \n /\n \n \n \n     Charente\n                                        \n \n </div>\n\n \n \n <div class="price">\n 10 000&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/705444732.htm?ca=20_s" title="Peugeot 206">\n <div class="lbc">\n <div class="date">\n <div>12 sept</div>\n <div>17:24</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.197.40/thumbs/258/258412083174910.jpg" alt="Peugeot 206">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">1</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Peugeot 206\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Ars-en-Ré\n \n /\n \n \n \n     Charente-Maritime\n                                        \n \n </div>\n\n \n \n <div class="price">\n 1 200&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/704383788.htm?ca=20_s" title="Audi A4 1.8 125cv">\n <div class="lbc">\n <div class="date">\n <div>9 sept</div>\n <div>22:14</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.196.40/thumbs/228/228409088680051.jpg" alt="Audi A4 1.8 125cv">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Audi A4 1.8 125cv\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Saint-Savinien\n \n /\n \n \n \n     Charente-Maritime\n                                        \n \n </div>\n\n \n \n <div class="price">\n 2 000&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/701777747.htm?ca=20_s" title="Golf 3">\n <div class="lbc">\n <div class="date">\n <div>3 sept</div>\n <div>11:40</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.197.60/thumbs/167/167403089402529.jpg" alt="Golf 3">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Golf 3\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Jonzac\n \n /\n \n \n \n     Charente-Maritime\n                                        \n \n </div>\n\n \n \n <div class="price">\n 1 700&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n <a href="http://www.leboncoin.fr/voitures/700131045.htm?ca=20_s" title="Peugeot 806">\n <div class="lbc">\n <div class="date">\n <div>30 août</div>\n <div>12:36</div>\n </div>\n \n <div class="image">\n \n <div class="image-and-nb">\n <img src="http://193.164.196.60/thumbs/122/122430032653636.jpg" alt="Peugeot 806">\n \n \n \n <div class="nb">\n <div class="top radius">&nbsp;</div>\n <div class="value radius">3</div>\n </div>\n \n </div>\n \n </div>\n \n <div class="detail">\n <div class="title">\n Peugeot 806\n </div>\n <div class="category">\n \n \n </div>\n <div class="placement">\n \n \n \n \n \n \n Saint-Germain-de-Montbron\n \n /\n \n \n \n     Charente\n                                        \n \n </div>\n\n \n \n <div class="price">\n 3 200&nbsp;&euro;\n </div>\n \n \n \n\n \n \n </div>\n <div class="clear"></div>\n </div>\n </a>\n <div class="clear"></div>\n \n \n </div>\n \n <div class="list-gallery">\n\';

var m;

while ((m = re.exec(str)) != null) {
    if (m.index === re.lastIndex)
        re.lastIndex++;

    console.log(m);
}

La regex est dans la variable re et comme tu peux le voir, str est la variable qui contient le code de la page, moi j'ai mis que le bout avec les infos utiles sinon vlà le truc de 20 km de long... Oui c'est assez complexe.

La regex commence par trouver le lien et récupère le contenu du titre, puis il passe à la class="lbc" puis à la class="date" et fini par récup le contenu des 2 divs qui contiennent la date.

Voilà ce qu'elle te renvoie.

retour-regex.png (31.23 KiB) Viewed 5301 times

Code: Select all

/<div.*class="list-lbc">([\s|\S]*?)<div.*class="list-gallery">/g

Regex permettant de sélectionner la div ayant la classe list-lbc, div qui contient les infos sur les produits. Utilise cette regex là avant, et traite son résultat avec la regex du haut, ça devrais être normalement un poil plus rapide. Pas test mais bon...

[Sergent-Quentin]

Bonjour,

Merci pour cet exemple un peu complexe ^^

Avant ta réponse j'avais regarder sur le site pour regex, j'arrivais à faire certains trucs comme savoir si une adresse e-mail était valide :

Code: Select all

var email = prompt("Entrez votre adresse e-mail :", "javascript@siteduzero.com");

if (/^[a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,6}$/.test(email)) {
    alert("Adresse e-mail valide !");
} else {
    alert("Adresse e-mail invalide !");
}

Lien du site http://fr.openclassrooms.com/informatiq ... rtie-2-2-1

En ce moment je suis malade donc pas vraiment en état de bien réfléchir ^^ je pense aller mieux d'ici 1/2 jours.

Je te te tiens au courant

Merci pour ton aide

[Sergent-Quentin]

J'ai étudier ton code et compris le principe malgré que ça reste compliqué quand on connait pas ^^ ( surtout pour créer la regex pour ma part )

J'aurais une question :

Quand tu as créer cette regex, tu tais guider tout simplement avec le code source entier de la page ou tu as utiliser l'option ( clic droit sur l'élément ) "Examiner l’élément" puis avec les petites flèches tu as continué jusqu'à trouver la valeur ?

[Violette]

Examiner l’élément te retourne le code source, c'est juste qu'il a l'avantage de te situé directement sur ce que tu cherches, de pouvoir déplier/replier le contenus des balises, bref d'avoir ce que tu cherches de propre et de pas galérer à chercher dans le fouillis de la page complète ^^.

Sinon pour t'aider pour les regex : http://regex101.com/#javascript ^^.

[Sergent-Quentin]

Intéressant...

j'y ai jeter un coup d’œil avant d'aller me coucher et apparemment ça te montre en détails de ta regex en gros ^^

Merci beaucoup pour ce lien

[Jmgr]

Je pense qu'Actiona n'est pas le bon outil pour automatiser des actions complexes sur le Web : il faut aussi penser au Javascript de la page Web qui est exécuté et parfois nécessaire pour naviger sur un site.

Je te conseilles donc plutôt de jeter un oeil à Selenium, qui est exactement fait pour ça.