我正在开发一个应用程序,该应用程序可以在打开第三方网站后在浏览器上下文中运行自己的Javascript。作为基于reactjs构建并具有登录表单的示例网站,您可以参考此链接。
我试图用reactjs生成的形式填写用户名和密码。但是,我无法完全实现它。
我能够在用户名/密码字段和reactjs内设置值的最接近的代码库是:
function setNativeValue(element, value) { element.focus(); element.click(); element.value = value; element.defaultValue = value; let tracker = element._valueTracker; if (tracker) { tracker.setValue(lastValue); } let inputEvent = new Event("input", { target: element, bubbles: true }); inputEvent.simulated = true; element.dispatchEvent(inputEvent); } document.getElementsByClassName("sc-qamJO")[0].click(); // login top button setTimeout(function () { setNativeValue(document.getElementsByClassName("sc-AxheI")[1], "username"); // username setNativeValue(document.getElementsByClassName("sc-AxheI")[2], "password"); // password setTimeout(function () { document.getElementsByClassName("sc-fzpans")[3].click(); // login button }, 1000); }, 1000);
问题: 但是,我无法自动提交reactjs表单。This field is required*即使我根据自己的理解和Google搜索建议正确完成了所有操作,也会引发错误错误。我无法满足现场验证者的要求。
This field is required*
我尝试了很多方法来自动提交表单。他们之中有一些是:
这个github问题评论是我目前正在解决的问题
您能告诉我该怎么做,以满足登录表单中可用的reactjs验证器,以便该表单可以使用javascript或jQuery在网站上自动提交。
注意-示例网站不包含jQuery,因此从理解的角度来看,纯Javascript代码也将起作用。
我正在使用Chromium作为浏览器。
根据setState示例,我可以使用以下方式提交登录表单:
setState
const openLoginModal = () => document.getElementsByClassName('sc-qamJO')[0].click() const submitLoginForm = () => document.getElementsByClassName('sc-fzpans')[3].click() const getCompFiber = fiber => { let parentFiber = fiber.return while (parentFiber && typeof parentFiber.type === 'string') { parentFiber = parentFiber.return } return parentFiber } const getLoginForm = () => { const dom = document.getElementsByClassName('sc-AxheI')[1] const key = Object.keys(dom).find(key => key.startsWith('__reactInternalInstance$')) const domFiber = dom[key] if (domFiber == null) return null let compFiber = getCompFiber(domFiber) while (compFiber) { compFiber = getCompFiber(compFiber); if (compFiber && compFiber.stateNode && compFiber.stateNode.props && compFiber.stateNode.props.loginForm) { return compFiber } } } const login = (username, password) => { openLoginModal() setTimeout(() => { const loginForm = getLoginForm() loginForm.stateNode.props.loginForm.password = { value: password, error: false, errorMessage: 'This field is required', type: 'password' } loginForm.stateNode.props.loginForm.username = { value: username, error: false, errorMessage: 'This field is required' } submitLoginForm() }, 1000) } login('myUser', 'myPassword')
登录失败并显示500错误(这很奇怪),但是我检查了一下,并尝试使用无效的用户名/密码手动登录时使用了相同的错误代码,因此我认为它应该使用适当的凭据才能正常工作。