如何在 Puppeteer 中使用 jQuery 设置 React 控制组件的值？答案

【问题标题】：How do I set the value of a React controlled component with jQuery in Puppeteer?如何在 Puppeteer 中使用 jQuery 设置 React 控制组件的值？
【发布时间】：2017-11-06 12:18:41
【问题描述】：

我正在使用Puppeteer 对 React 应用程序进行一些测试。问题是受控输入在与它们交互时不会将它们的值保存到虚拟 DOM 或应用程序的状态中，只需设置 DOM 值即可。

经过几天的研究，我根据this的回复想出了以下解决方案：

describe('<HomePage />', async () => {
  eval('jasmine.DEFAULT_TIMEOUT_INTERVAL = 50000;'); //eslint-disable-line
  it('should make some new element visible', async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('http://localhost:3000/links');
    await page.waitForSelector('input', { visible: true });
    await page.addScriptTag({ url: 'https://code.jquery.com/jquery-3.2.1.min.js' });
    const someNewElement = await page.evaluate(() => {
      const $ = window.$;

      function doEvent(obj, event) {
      /* Created by David@Refoua.me */
        const newEvent = new Event(event, { target: obj, bubbles: true });
        return obj ? obj.dispatchEvent(newEvent) : false;
      }

      const mySelect = $('[name="mySelect"]')[0];
      mySelect.value = 'MakeSomeNewElementVisible';

      // for input dispatch -> input, for select dispatch -> change
      doEvent(mySelect, 'change');

      return $('#someNewElement_was_made_visible').length;
    });
    expect(someNewElement).toEqual(1);
    setTimeout(() => { browser.close(); }, 3000);
  });
});

我的问题是：如何用一些 jQuery 函数替换 doEvent 函数？

【问题讨论】：

标签： jquery reactjs console puppeteer

【解决方案1】：

对于您的问题，这是一个更好的解决方案，我假设您正在尝试从列表中选择一个选项，在这种情况下，只需使用以下内容，

page.select('[name="mySelect"]', 'MakeSomeNewElementVisible');

如果这不合适，您可以调整选择器。我建议让 puppeteer 为你做繁重的工作。

如果您仍需要使用 .evaluate 调度某些事件，您可以查看 this answer 或 this one。

确保在执行某些事件后等待一段时间，某些事件可能会添加一些过渡/延迟。否则，您可能最终会在元素在 dom 中可见之前返回结果。

【讨论】：