为什么我无法使用纯JS登录Instagram？

Question

出于研究目的，我试图在Instagram的网络版本（https://www.instagram.com/accounts/login/）上进行自动登录。

我认为只需填写用户名和密码字段，然后提交表格即可轻松完成任务；但是不起作用，该表单是使用

提交的

这些是涉及的要素：

<input class="_2hvTZ pexuQ zyHYP" aria-label="Phone number, username, or email" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" value="">
<input class="_2hvTZ pexuQ zyHYP" aria-label="Password" aria-required="true" autocapitalize="off" autocorrect="off" name="password" type="password" value="">   
<button class="sqdOP L3NKy y3zKF" disabled="" type="submit"><div class="                  Igw0E IwRSH eGOV_ _4EzTm                                                                                                              ">Log In</div></button>

这是我用来填写元素并提交表单的代码：

document.getElementsByName('username')[0].value = 'myusername';
document.getElementsByName('password')[0].value = 'mypassword';
document.getElementsByTagName('button')[0].removeAttribute("disabled");
document.getElementsByTagName('button')[0].click();

document.getElementsByName('username')[0].value = 'myusername';
document.getElementsByName('password')[0].value = 'mypassword';
document.getElementsByTagName('button')[0].click();

<input class="_2hvTZ pexuQ zyHYP" aria-label="Phone number, username, or email" aria-required="true" autocapitalize="off" autocorrect="off" maxlength="75" name="username" type="text" value="">
<input class="_2hvTZ pexuQ zyHYP" aria-label="Password" aria-required="true" autocapitalize="off" autocorrect="off" name="password" type="password" value="">
<button class="sqdOP L3NKy y3zKF" disabled="" type="submit"><div class="                  Igw0E IwRSH eGOV_ _4EzTm">Log In</div></button>

前两行将填写字段，第四行将提交表格；某种程度上这是行不通的。实际上，即使填充字段的行也似乎无法正常工作，因为当我提交表单时，我看不到任何字段发送到服务器。

问题似乎与React有关，但是为什么我的代码不起作用？它应该可以正常工作，因为它是纯JavaScript；我在这里想念什么？

Answer 1

这可能是由于Instagram是Facebook产品这一事实，这意味着它将由React制成并具有受控组件，可以监听输入字段上的合成onChange事件。不能通过设置字段本身的值来更新这些值。

我认为，最简单的方法是使用Puppeteer，这是Google Chrome团队开发的库，主要用于测试运行中的前端应用程序。您可以使其触发人工事件，例如输入用户名和密码。

这是一个用p操纵该路径的代码示例：

const puppeteer = require("puppeteer");

const login = async (user, pass) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://www.instagram.com/accounts/login/');
  
  await page.waitForSelector('input[aria-label="Phone number, username, or email"]');
  await page.focus('input[aria-label="Phone number, username, or email"]');
  
  await page.keyboard.type(user);
  await page.keyboard.press("Tab");
  await page.keyboard.type(pass);
  await page.keyboard.press("Enter");

  // Await somthing to load on the home page
  // Do the rest of what you'd want to do from here
}


login(testUser, testPass);

我知道这涉及使用新库，但是它很容易弄清楚，并且可能以最简单的方式完成了您想要的工作。

如果您需要更多帮助，请告诉我！

Answer 2

如果页面使用的是React 16（或兼容版本），则可以针对以下用例修改“ What is the best way to trigger onchange event in react js”的答案：

const setValue = Object.getOwnPropertyDescriptor(
  window.HTMLInputElement.prototype,
  "value"
).set
const modifyInput = (name, value) => {
  const input = document.getElementsByName(name)[0]
  setValue.call(input, value)
  input.dispatchEvent(new Event('input', { bubbles: true}))
}
const submit = () => {
  const button = document.getElementsByTagName('button')[0]
  button.removeAttribute("disabled")
  button.click()
}

modifyInput('username', 'myusername')
modifyInput('password', 'mypassword')
submit()

Answer 3

如果您不触摸输入字段并输入足够的键来激活该按钮，则提交按钮将被禁用。您可以做的是在单击之前添加一行以启用“提交”按钮。试试这个

document.getElementsByName('username')[0].value = 'myusername';
document.getElementsByName('password')[0].value = 'mypassword';
document.getElementsByTagName('button')[0].removeAttribute("disabled");
document.getElementsByTagName('button')[0].click();