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();
})();

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

1 个答案: