javascript - 如何通过 Webdriver 自动化测试在 FireFox/Edge 中填写 redux-form 输入

Question

Webdriver.io是一个自动化测试库。

在 Chrome 和 Safari 中，我可以使用 setValue或addValue使用xpaths在自动化测试期间填写文本输入并提交表单。

但是在 Edge/FireFox 中我不能，这些命令不起作用。

• Also found this issue on Github.

• developer.microsoft : setValue() command does not work

环顾四周，我发现了一个涉及 browser.addCommand 和 browser.execute 的解决方法，我在下面使用了它们，它将直观地填充 redux-form。然而，该表单并没有检测到该表单实际上已被填写:(因此，如果单击自动提交按钮，则该按钮将不会继续。

浏览器执行解决方法

browser.addCommand('setInputValue', function(element, value) {
    const webBrowser = browser.capabilities.browserName.toLowerCase();

    if (webBrowser === ‘microsoftedge’ || webBrowser === ‘firefox’) {
        browser.execute((el, val) => {           
            const regex = /\'(.*)\'/; // pulls name out of xpath
            const extractedName = el.match(regex)[1];

            document.getElementsByName(extractedName)[0].focus();
            document.getElementsByName(extractedName)[0].value = val;

        }, element, value);
    }
    else {
        $(element).setValue(value);
    }
});

使用方法:

setFirstName: value => {
    const xpath = "//input[@name='firstName']";
    browser.setInputValue(xpath, value);
    // $(xpath).setValue(value); // <- normal webdriver method which doesn't work
}

尝试了dispatchEvent

From this example ，但同样的问题。

if (webBrowser === 'microsoftedge' || webBrowser === 'firefox') {
    browser.execute((el, val) => {
        const regex = /\'(.*)\'/; // pulls name out of xpath
        const extractedName = el.match(regex)[1];

        // https://github.com/facebook/react/issues/10135#issuecomment-500929024
        const input = document.getElementsByName(extractedName)[0];
        input.value = val;
        input.dispatchEvent(new Event('change', { bubbles: true }));

        // document.getElementsByName(extractedName)[0].focus();
        // document.getElementsByName(extractedName)[0].value = val;

    }, element, value);
}

你们中有人在使用 Webdriver 在 FireFox 或 Edge 上进行自动化测试时遇到过这个问题吗？

Answer 1

https://github.com/facebook/react/issues/10135#issuecomment-314441175

您需要在 react 中触发更改事件，或者您可以使用上述解决方法(设置 native 值)

typescript 中的示例代码，但不推荐使用，因为它不模拟实际的用户输入。

browser.addCommand(
  "setNativeValue",
  function(this: any, value: string) {
    browser.execute(
      function(element, val) {
        try {
          const valueSetter = Object.getOwnPropertyDescriptor(element, "value");
          const prototype = Object.getPrototypeOf(element);
          const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, "value");

          if (valueSetter && valueSetter !== prototypeValueSetter) {
            prototypeValueSetter!.set!.call(element, val);
          } else {
            valueSetter!.set!.call(element, val);
          }
          const event = document.createEvent("Event");
          event.initEvent("input", true, true);
          element.dispatchEvent(event);
        } catch {
          element.value = val;
        }
      },
      this,
      value,
    );
  },
  true,
);