Cucumber-Puppeteer - 尝试滚动以便元素可见 - 滚动不起作用

Question

这是在 world.js 的 Cucumber puppeteer 项目中。

我意识到我尝试使用 querySelector 查找的元素最初不在屏幕上，所以我想向右滚动。

所以我添加了滚动代码，但屏幕截图显示滚动没有发生。它还显示滚动条可见。

async getForecastStartColumn(selector, attribute, wait = 0) {
      let forecast;
      await this.page.waitFor(wait);

      await this.page.evaluate(_ => {
         window.scrollBy(3000, 0);
      });

      await this.page.waitFor(1000);
      await this.page.screenshot({ path: './world-177.png', fullPage: true });
      result = await this.page.document.querySelector('div[class="ag-header-cell ag-header-cell-sortable 
          grid-column-header-forecast"]');
   }

//rest of code omitted

Answer 1

尝试使用此代码向右滚动。

const left = $(document).outerWidth() - $(window).width();
$('body, html').scrollLeft(left);

async getForecastStartColumn(selector, attribute, wait = 0) {
      let forecast;
      await this.page.waitFor(wait);

      await this.page.evaluate(_ => {
         const left = $(document).outerWidth() - $(window).width();
         $('body, html').scrollLeft(left);
      });

      await this.page.waitFor(1000);
      await this.page.screenshot({ path: './world-177.png', fullPage: true });
      result = await this.page.document.querySelector('div[class="ag-header-cell ag-header-cell-sortable 
          grid-column-header-forecast"]');
   }

//rest of code omitted

编辑 1

我使用的是纯 js 而不是 jQuery。你应该知道向右滚动的元素和 replace 'html' 这个元素的选择器可以向右滚动。

我正在使用 .scrollTo(xpos, ypos) 可以向左、向右、顶部和按钮滚动。 docs. and using .scrollWidth this is the width of the content of element in pixels. docs. and using .pageYOffset to get current y offset of element to keep this position during scrolling. becouse .scrollTo(xpos, ypos) need to x and y. we need to change xpos only and keep ypos value. docs.

async getForecastStartColumn(selector, attribute, wait = 0) {
      let forecast;
      await this.page.waitFor(wait);

      await this.page.evaluate(_ => {
         const terget = document.querySelector('html');
         terget.scrollTo(terget.scrollWidth, terget.pageYOffset);
      });

      await this.page.waitFor(1000);
      await this.page.screenshot({ path: './world-177.png', fullPage: true });
      result = await this.page.document.querySelector('div[class="ag-header-cell ag-header-cell-sortable 
          grid-column-header-forecast"]');
   }

//rest of code omitted

Cucumber-Puppeteer - 尝试滚动以便元素可见 - 滚动不起作用

Cucumber-Puppeteer - Trying to scroll so element will be visible - scroll not working

scroll

cucumber

puppeteer