web-dev-qa-db-fra.com

Comment accéder à une iframe de CasperJS?

J'ai une page Web avec un iframe. J'aimerais accéder au contenu de l'iframe à l'aide de CasperJS . En particulier, je dois cliquer sur des boutons et remplir un formulaire. Comment puis je faire ça?

La page Web principale est main.html :

<html><body>
<a id='main-a' href="javascript:console.log('pressed main-a');">main-a</a>
<iframe src="iframe.html"></iframe>
<a id='main-b' href="javascript:console.log('pressed main-b');">main-b</a>
</body></html>

L'iframe est:

<html><body>
<a id='iframe-c' href="javascript:console.log('pressed iframe-c');">iframe-c</a>
</body></html>

Mon approche naïve:

var casper = require('casper').create({
    verbose: true,
    logLevel: "debug"
});

casper.start("http://jim.sh/~jim/tmp/casper/main.html", function() {
    this.click('a#main-a');
    this.click('a#main-b');
    this.click('a#iframe-c');
});

casper.run(function() {
    this.exit();
});

Bien sûr, cela ne fonctionne pas, car le sélecteur a#iframe-c n'est pas valide dans le cadre principal:

[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
[debug] [phantom] opening url: http://jim.sh/~jim/tmp/casper/main.html, HTTP GET
[debug] [phantom] Navigation requested: url=http://jim.sh/~jim/tmp/casper/main.html, type=Other, lock=true, isMainFrame=true
[debug] [phantom] url changed to "http://jim.sh/~jim/tmp/casper/main.html"
[debug] [phantom] Navigation requested: url=http://jim.sh/~jim/tmp/casper/iframe.html, type=Other, lock=true, isMainFrame=false
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step 2/2 http://jim.sh/~jim/tmp/casper/main.html (HTTP 200)
[debug] [phantom] Mouse event 'click' on selector: a#main-a
[info] [remote] pressed main-a
[debug] [phantom] Mouse event 'click' on selector: a#main-b
[info] [remote] pressed main-b
[debug] [phantom] Mouse event 'click' on selector: a#iframe-c
FAIL CasperError: Cannot dispatch click event on nonexistent selector: a#iframe-c
#    type: uncaughtError
#    error: "CasperError: Cannot dispatch click event on nonexistent selector: a#iframe-c"
CasperError: Cannot dispatch click event on nonexistent selector: a#iframe-c    
  /tmp:901 in mouseEvent
  /tmp:365 in click
  /tmp/test.js:9
  /tmp:1103 in runStep
  /tmp:324 in checkStep

Y a-t-il un moyen de faire fonctionner cela? Un bidouillage qui implique de fouiller directement dans Phantomjs serait bien, mais je ne sais pas quoi faire ici.

J'utilise la version 1.0.0-RC1 de CasperJS et la version 1.6.0 de phantomjs.

javascriptiframewebkitphantomjscasperjs
32
Jim Paris

Passé pour toujours à chercher cela, et bien sûr, j'ai trouvé la réponse après avoir posté la question.

Je peux utiliser les nouvelles commandes de changement de cadre ajoutées à phantomjs dans this commit . Plus précisément, les fonctions this.page.switchToChildFrame(0) et this.page.switchToParentFrame(). Cela semble non documenté, et il semble aussi que les méthodes ont été modifiées pour les prochaines versions, mais cela fonctionne

var casper = require('casper').create({
    verbose: true,
    logLevel: "debug"
});

casper.start("http://jim.sh/~jim/tmp/casper/main.html", function() {
    this.click('a#main-a');
    this.click('a#main-b');
    this.page.switchToChildFrame(0);
    this.click('a#iframe-c');
    this.page.switchToParentFrame();
});

casper.run(function() {
    this.exit();
});
41
Jim Paris

À partir de 1.0, vous pouvez utiliser withFrame

  casper.open("http://www.example.com/page.html", function() {
    casper.withFrame('flashHolder', function() {
      this.test.assertSelectorExists('#the-flash-thing', 'Should show Flash');
    });
  });
35
olleolleolle

En fait, vous devrez utiliser la nouvelle fonctionnalité --web-security=no Fournie par Phantomjs 1.5 pour pouvoir accéder à ces iFrames et à leur contenu.

4
Turcu Vlad

Supposons que nous ayons différents cadres (frame1 et frame2) et que nous devons accéder à différents éléments (comme cliquer ou vérifier si une balise div existe ou non) de ces cadres. 

casper.withFrame('frame1', function() {
    var file = '//*[@id="profile_file"]';
    casper.thenClick(x(file));
});

casper.withFrame('frame2', function() {
  casper.then(function () {
     casper.waitForSelector('#pageDIV',
            function pass() {
                console.log("pass");
            },
            function fail(){
                console.log("fail");
            }
      );
   });
});
3
Siddhartha Dimania

Vous pouvez faire quelque chose comme ça:

casper.start("url here...", function() { 
    this.withFrame(0, function() {
        this.evaluate(function() {
            document.querySelector('img#btn_start').click();
        })
    })
});

Vous pouvez remplacer le zéro par le nom de l'iframe.

0
Bla...