个人中心
gpt4 book ai didi

javascript - 用于输入的 Puppeteer 方法永远不会完成输入传递给它们的完整字符串

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:23:27 25 4
gpt4 key购买 nike

问题

问题总结:我正在编写几个测试套件(使用 Jest 和 Puppeteer)来自动测试我的 AngularJS 应用程序的主页。我想自动化的许多测试都涉及使用 <textareas> 填写表格。的其中需要输入字符串(不同长度)。但问题在于，每个可用于键入的 Puppeteer 方法都极不一致，因为并非传递给这些方法的字符串中的所有字符最终都被键入，有时这些方法甚至会破坏后续方法做不相关的事情。

测试环境概览

  • puppeteer 版本:1.19.0
  • Jest 版本:24.8.0

我到目前为止所做的尝试

研究:我在 Puppteeer 的 Github 问题页面上广泛搜索了解决方案，因为这个问题似乎非常普遍。到目前为止，我已经尝试了 #1648 中提供的解决方案, #2784 , #1958和 #1223 .以下是我尝试过的代码片段，摘自这些不同的答案。到目前为止，它们都没有奏效。

<!-- index.html -->
<html>
  <body ng-app="myApp" ng-controller="myCtrl">
    <div>
      <md-content>
        <form test-id="myForm">
          <md-input-container>
            <div>
              <textarea ng-model="myCtrl.user.name" test-id="userName"></textarea>
            </div>
          </md-input-container>
          <md-input-container>
            <input type="file" ng-model="myCtrl.user.photo" test-id="uploadPhoto">
          </md-input-container>
          <md-dialog-actions>
            <button type="submit" test-id="submitForm">Submit</button>
          </md-dialog-actions>
        </form>
      </md-content>
    </div>
    <!-- These divs appear after the form has been submitted -->
    <div>
      <p><!-- username goes here --></p>
    </div>
    <div>
      <img><!--  photo goes here --></img>
    </div>
  </body>
</html>
// index.spec.js
describe('fill out and submit form', () => {

  test('page has loaded', async() => {

    // note: I've tried both these methods for waiting for all the DOM
    // content to load before starting to fill out the form,
    // and neither make much of a difference in the typing behavior,
    // so I usually go with waiting for all network connections
    // to finish
    await page.goto('https://my-website.com', {waitUntil: 'networkidle0'});
    // await page.goto('https://my-website.com', {waitUntil: 'networkidle2'});

  });

  test('fill out form', async() => {

    let formSelector = 'form[test-id="myForm"]';
    // waits for form to appear
    await page.waitForSelector(formSelector, {visible: true, timeout: 3000});

    let longNameInputSelector = 'textarea[test-id="userName"]';

    // attempt 1: focus then page.keyboard.type
    // behavior: rarely finishes typing
    await page.focus(longNameInputSelector);
    await page.keyboard.type('Casey');

    // attempt 2: page.type
    // behavior: sometimes finishes typing
    await page.type(longNameInputSelector, 'Casey');

    // attempt 3: page.type then press 'Enter' 
    // behavior: this method tends to fix the typing but
    // breaks the photo uploading code below
    await page.type(longNameInputSelector, 'Casey');
    await page.keyboard.press('Enter');

    // attempt 4: page.type then press 'Tab'
    // behavior: sometimes finishes typing
    await page.type(longNameInputSelector, 'Casey');
    await page.keyboard.press('Tab');

    // attempt 5: wait for input selector to be visible and then type
    // behavior: rarely finishes typing
    await page.waitForSelector(longNameInputSelector, {visible: true, timeouts: 3000});
    await page.focus(longNameInputSelector);
    await page.keyboard.type('Casey');

    // attempt 6: convert input to Element Handle and then click
    // behavior: more reliable but fails occasionally
    let inputHandle = await page.$(longNameInputSelector);
    await inputHandle.click();
    await page.keyboard.type('Casey');

    // upload photo
    let inputPhotoSelector = 'input[type="file" test-id="uploadPhoto"]';
    const inputPhotoHandle = await page.$(inputPhotoSelector);
    const filePath = path.relative(process.cwd(), __dirname + '/me.png');
    await inputPhotoHandle.uploadFile(filePath);
  });

  test('submit form', async() => {

    // note: I've played a little with the way I'm submitting the form
    // to see if that could make any difference. So far it hasn't.
    // Here is what I've tried:

    // attempt 1: wait for the submit button to no longer be
    // disabled (i.e. wait for entire form to be filled out)
    // behavior: doesn't fix the problem. typing behavior still inconsistent
    let submitBtnSelector = 'button[test-id="submitForm"]:not([disabled])';
    await page.click(submitBtnSelector);

    // attempt 2: issue a fake click over the submit button to 
    // prevent autocomplete
    // behavior: doesn't fix the problem. typing still erratic
    await page.evaluate((sel) => {
      document.querySelector(sel).click();
    }, submitBtnSelector);

  });

});

最后的想法/问题:

有谁知道在 Puppeteer 中自动输入的可靠方法，这样我的测试就不会偶尔失败？

最佳答案

我正在尝试测试 Angular 应用程序，但与点击和类型相关的操作不起作用。最后用 MouseEvent 解决了和 KeyboardEvent API。

它适用于 MouseEvent 和 KeyboardEvent。这是 MouseEvent 的示例。

function simulateEvent(eventx, elem) {
    const event = new MouseEvent(eventx, {
        view: window,
        bubbles: true,
        cancelable: true,
    });
    return elem.dispatchEvent(event);
};

function simulateType(selector, value) {
    const elem = document.querySelector(selector);
    elem.value = value;
    const events = ['click', 'focus', 'keydown', 'keypress', 'mousedown', 'compositionend', 'compositionstart', 'blur']
    for (let fakeEvent of events) {
        simulateEvent(fakeEvent, elem);
    }
};

它将值设置到输入字段，并发送许多事件，如您所见。

为什么？一些网站会监视 keydown、keypress 等。但是，如果我没有单击输入字段，很多网站甚至不允许我提交表单。

关于javascript - 用于输入的 Puppeteer 方法永远不会完成输入传递给它们的完整字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57665892/

25 4 0
文章推荐： javascript - 动画滚动到溢出 div 中的元素顶部
文章推荐： ios - 使用带有自定义键的 KVO
文章推荐： ios - ip camera feed 到 IOS 应用程序如何允许全局连接？
文章推荐： javascript - Android React Native 应用程序在 getUserMedia WebRTC 调用时崩溃
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com