如何调用作为 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 代码完全准备好。怎么检测就看你自己了，我直接用dummy 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();
})();

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

How can I call a function of an element returned as an ElementHandle?

javascript

puppeteer