Webdriver.io是一个自动化测试库。
在 Chrome 和 Safari 中,我可以使用 setValue或addValue使用xpaths在自动化测试期间填写文本输入并提交表单。
但是在 Edge/FireFox 中我不能,这些命令不起作用。
环顾四周,我发现了一个涉及 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 上进行自动化测试时遇到过这个问题吗?
最佳答案
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,
);
关于javascript - 如何通过 Webdriver 自动化测试在 FireFox/Edge 中填写 redux-form 输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58860806/