如何模拟用户在表单中输入内容

Question

我正在尝试制作一个 chrome 扩展来填写特定页面中的表单。（你可以把它想象成LastPass填写用户和密码）

目前，我正在尝试使用 Javascript 填写信用卡表单，但是如果您通过 Javascript 插入信用卡或其他信息，则当您提交表单时，网站会卡住加载。

我目前已尝试用此添加卡document.querySelector("#cardNumber").value="5454545454545454";，并且我已尝试在该输入上执行.focus()或操作.click()，甚至逐位添加值，但它似乎没有触发正确保存信用卡的网站事件。

因此，我目前正在尝试弄清楚是否有任何方法可以模拟用户添加表单，以便触发网站事件。（该网站是 Mercadolibre.com，但我不知道这是否有任何帮助）。

以下是卡号更改时执行的网站代码片段。

App.module("Checkout.Payments.Views", function(e, t, n, i, o) {
  var s = {
    cardNumber: "number",
    ownerName: "name",
    expirationDate: "expiration",
    securityCode: "security",
    brand: "brand"
  };
  e.CardContainer = i.ItemView.extend({
    getTemplate: function() {
      return t.Utils.getTemplate(t.Components.templates.card, '[data-js="card"]')
    },
    className: "new-card__container--view",
    ui: {
      card: ".ui-card"
    },
    initialize: function() {
      var e = this;
      this.on("refresh", this.onCardRefresh),
        this.on("rotate", this.onRotate),
        this.on("brandSet", this.onBrandSet),
        this.on("showSecurityHint", this.onShowSecurityHint),
        this.modelEvents = {},
        this.model.keys().forEach(function(t) {
          "binHelper" !== t && (e.modelEvents["change:" + t] = function() {
            return e.onCardDataChanged({
              key: t,
              rotate: "securityCode" === t
            })
          })
        }),
        this.bindEntityEvents(this.model, this.modelEvents),
        this.brandSet = !1
    },
    onBrandSet: function() {
      this.brandSet = !0
    },
    onShow: function() {
      this.cardComponent = new CardComponent,
        o(this.cardComponent.cardElements.name).attr("data-title", this.model.get("ownerNamePlaceholder")),
        this.trigger("refresh")
    },
    onCardRefresh: function() {
      var e = this;
      this.model.keys().forEach(function(t) {
        e.model.trigger("change:" + t, {
          rotate: !1
        })
      })
    },
    onCardDataChanged: function(e) {
      var t = e.key + "Changed",
        n = t.replace(/\w{1}/, function(e) {
          return e.toUpperCase()
        }),
        i = "on" + n;
      this.triggerMethod(this[i] instanceof Function ? t : "otherCardDataChanged", e.key)
    },
    onCardNumberChanged: function(e) {
      var t = this.model.get(e);
      this.cardComponent[s[e]] = this.model.get(e),
        t.length < 6 && (this.model.set("brand", ""),
          this.model.set("bin", ""),
          this.brandSet = !1)
    },
    onCardOwnerNameChanged: function(e) {
      var t = this.model.get(e) || this.model.get("ownerNamePlaceholder");
      this.cardComponent[s[e]] = t
    },
    onOtherCardDataChanged: function(e) {
      this.cardComponent[s[e]] = this.model.get(e),
        "" !== this.model.get("brand") && this.trigger("brandSet")
    },
    onRotate: function(e) {
      "front" === e ? (this.cardComponent.rotateFront(),
        this.cardComponent.blur = "securityFront") : "back" === e && this.cardComponent.rotateBack()
    },
    onShowSecurityHint: function() {
      this.cardComponent.focus = "securityFront"
    }
  })
}),

Answer 1

此问题的解决方案是发送用户手动键入时触发的事件。例如事件（模糊、更改和输入）。

我将事件添加为常量，如下所示：

const EVENT_OPTIONS = {bubbles: true, cancelable: false, composed: true};
const EVENTS = {
    BLUR: new Event("blur", EVENT_OPTIONS),
    CHANGE: new Event("change", EVENT_OPTIONS),
    INPUT: new Event("input", EVENT_OPTIONS),
};

之后，根据网站的不同，您可能只需要添加其中一些或全部，如下所示：

const inputElement = document.querySelector("#cardNumber");
inputElement.value = "5454545454545454";
inputElement.dispatchEvent(EVENTS.INPUT);

在其他网站中，您可以模拟事件，更好地发送CHANGE事件，然后发送BLUR. _valueTracker对于其他使用 React 的网站，您可能需要像这样使用 React ：

const inputElement = document.querySelector("#cardNumber");
inputElement.value = "5454545454545454";
const tracker = inputElement._valueTracker;
tracker && tracker.setValue("5454545454545454");
inputElement.dispatchEvent(EVENTS.INPUT);
inputElement.dispatchEvent(EVENTS.BLUR);