javascript - ¿Cómo accedo a un iframe de CasperJS?
webkit phantomjs (5)
Tengo una página web con un iframe. Me gustaría acceder al contenido del iframe usando CasperJS . En particular, necesito hacer clic en los botones y completar un formulario. ¿Cómo puedo hacer eso?
La página web principal es 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>
El iframe es:
<html><body>
<a id=''iframe-c'' href="javascript:console.log(''pressed iframe-c'');">iframe-c</a>
</body></html>
Mi enfoque ingenuo:
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();
});
No funciona, por supuesto, porque el selector a a#iframe-c no es válido en el marco 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
¿Hay alguna manera de hacer funcionar esto? Un truco que implique meterse en phantomjs directamente estaría bien, pero no sé qué hacer allí.
Estoy usando CasperJS versión 1.0.0-RC1 y phantomjs versión 1.6.0.
De hecho, tendrá que usar la nueva característica --web-security=no proporcionada por Phantomjs 1.5 para poder acceder a esos iFrames y sus contenidos.
Desde 1.0 puedes usar withFrame
casper.open("http://www.example.com/page.html", function() {
casper.withFrame(''flashHolder'', function() {
this.test.assertSelectorExists(''#the-flash-thing'', ''Should show Flash'');
});
});
Pasé por siempre buscando esto, y por supuesto encontré la respuesta minutos después de publicar la pregunta.
Puedo usar los nuevos comandos de cambio de cuadro agregados a phantomjs en este compromiso . Específicamente, las this.page.switchToChildFrame(0) y this.page.switchToParentFrame() . Parece no documentado, y también parece que los métodos se han changed para las próximas versiones, pero funciona:
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();
});
Puedes hacer algo como esto:
casper.start("url here...", function() {
this.withFrame(0, function() {
this.evaluate(function() {
document.querySelector(''img#btn_start'').click();
})
})
});
Puede reemplazar el cero con el nombre del iframe.
Supongamos que tenemos marcos diferentes (marco1 y marco2) y tenemos que acceder a diferentes elementos (como hacer clic o verificar si la etiqueta div se cierra o no) de esos marcos.
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");
}
);
});
});