在页面中导航和屏幕截图

Navigate and screenshots in page

本文关键字：屏幕截图 导航      更新时间：2023-09-26

我尝试创建casperjs脚本来测试我的页面。实际算法看起来（1-5 有效）：

1) load url (login page)
2) take ss and save as img1.png
3) find inputs (login & pass)
4) fill inputs and click submit
5) take ss of new page and save as img2.png
6) change tab (page with two tabs - I want click on second tab)
7) do something

我不是 100% 确定代码是否正常，所以我把它粘贴在这里：

casper.start(url, function(){});
casper.then(function() { this.capture('img1.png'); });
casper.thenEvaluate(function() {
    document.querySelector('input[name="user"]').setAttribute('value', 'jamal');
    document.querySelector('input[name="pass"]').setAttribute('value', 'asd');
    document.querySelector('input[name="login"]').click();
});
 casper.then(function() { this.capture('img2.png'); });
casper.thenEvaluate(function() {
    document.getElementById('keyword_form').getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('li')[1].getElementsByTagName('a')[0].click();
    // this commented line works perfectly
    //document.getElementById('keyword_form').getElementsByTagName('div')[0].getElementsByTagName('ul')[0].getElementsByTagName('li')[1].getElementsByTagName('a')[0].style.background = "yellow"; 
});
casper.then(function() { 
    this.capture('img3.png');
});

在最后一个屏幕（img3）上，我看到选项卡没有更改。它仍然是默认的第一个选项卡。我真的不知道为什么会这样。知道吗？

你实际上在.click()有问题。

你需要

  1. 要么在支持.click()的情况下使用 jQuery 执行此操作，要么使用 jQuery 执行此操作，要么
  2. 遵循正确的方式 - elem.onclick.apply(elem);

阅读：如何以编程方式从锚标记调用 onclick（） 事件，同时在 onclick 函数中保留"this"引用？

注意：您也可以在casperJS加载页面时注入jquery.js。

 casper = require('casper').create({
    clientScripts:  [
        'jquery.min.js' // injected in remote DOM on every request
    ],
    pageSettings: { ... }
});
相关文章：