Casper.js点击ID相同、Name不同的按钮并截图问题求助

看起来你遇到的核心问题是页面里的按钮ID重复（所有按钮都用了dshButton），这不符合HTML规范，导致用ID选择器根本无法精准定位到你想要的按钮。另外你代码里的选择器ctl01$Body$uxDashboardList$ctl02$dshButton和实际HTML里的ct100$body$uxDashboardList$ct100$dshButton也存在大小写（Body vs body）和编号（ctl01 vs ct100）的差异，这也是找不到元素的关键原因之一。

下面给你几个可行的解决方案，按推荐程度排序：

1. 用Title属性定位（最直观） #

每个按钮的title属性是唯一的（Page 1/2/3/4），这是最可靠的定位方式：

var casper = require('casper').create(); 
var fs=require('fs'); 

casper.options.viewportSize = { width: 1920, height: 1080 }; 
casper.userAgent('Mozilla/5.0 (Windows NT 5.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36'); 

casper.start('https://websitenotdiscloseasitcontainsprivateinformationsandaspecialkey', function() { 
    this.wait(10000, function() { 
        // 点击Page 2的按钮
        this.click('input[title="Page 2"]');
        // 等待页面渲染完成再截图，避免截到未加载的状态
        this.wait(2000, function() {
            casper.capture('page2.png');
        });
    }); 
}); 

casper.run();

2. 用Name属性定位（精准匹配） #

如果title可能有变化，你可以直接用每个按钮唯一的name属性：

// 点击Page 2对应的按钮，严格匹配HTML里的name值
this.click('input[name="ct101$body$uxDashboardList$ct100$dshButton"]');

3. 用索引定位（适合按钮顺序固定的情况） #

如果按钮在同一个div容器里，你可以用CSS的:nth-child选择器按顺序选择：

// 选择第二个按钮（Page 2），nth-child从1开始计数
this.click('div input[type="image"]:nth-child(2)');

额外优化提示： #

• 尽量不要依赖固定时长的wait()，可以用waitForSelector()来等待按钮加载完成，避免因网络延迟导致的元素未找到：

  this.waitForSelector('input[title="Page 2"]', function() {
      this.click('input[title="Page 2"]');
      this.wait(2000, function() {
          casper.capture('page2.png');
      });
  }, function() {
      this.echo('按钮加载超时！');
  }, 15000);
  

• 可以用casper.echo(this.getHTML('div'))打印目标区域的HTML结构，确认选择器是否正确匹配元素。

内容的提问来源于stack exchange，提问作者JSChasle