如何调用作为ElementHandle返回的元素的函数？

Question

我可以对属性进行更改，并通过控制台触发此页面上元素的重新呈现

通过this link打开JBrowse演示站点，然后继续阅读...

在控制台中，我可以运行以下命令来更新1个元素(实际上我会全部更新)：

document.querySelectorAll('.track_jbrowse_view_track_alignments2')[0].track.displayMode = 'compact'
document.querySelectorAll('.track_jbrowse_view_track_alignments2')[0].track.layout = null
document.querySelectorAll('.track_jbrowse_view_track_alignments2')[0].track.redraw()

我尝试在木偶人代码中使用以下命令执行此操作：

const tracks = await page.$$('.track_jbrowse_view_track_alignments2');
for (let t of tracks) {
  await page.evaluate(t => {
    t.displayMode = 'compact';
    t.layout = null;
    t.redraw();
  }, t);
}

现有的功能脚本位于this link下，上面的代码片段将紧跟在突出显示的行之后插入。

任何指导都会很好，谢谢。

Answer 1

当JS代码完全就绪时，您应该等待它。这取决于你如何检测它，我只是使用虚拟的await page.waitFor(10000);。接下来，您应该在t.track对象上调用操作，而不是在t上。

以下是工作示例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(
    'http://jbrowse.org/code/JBrowse-1.12.4/?loc=ctgA%3A16801..23754&tracks=volvox-sorted_bam&data=sample_data%2Fjson%2Fvolvox&nav=0&tracklist=0&fullviewlink=0&highlight='
  );

  await page.waitFor(10000);

  const tracks = await page.$$('.track_jbrowse_view_track_alignments2');
  for (let t of tracks) {
    await page.evaluate(t => {
      t.track.displayMode = 'compact';
      t.track.layout = null;
      t.track.redraw();
    }, t);
  }
  await page.screenshot({ path: 'image.png' });
  await browser.close();
})();