Javascript 修改脚本以等待元素，然后填充它们

我正在尝试完成一个脚本来填写一个结帐表单。它需要单击一个没有id或名称的按钮，然后填写出现的表单的其余部分。我必须单击按钮的代码是：

document.querySelector('input[type="submit"][value="continue"]').click();

但这对我不起作用，其他元素将在此之后出现，我的脚本：

// ==UserScript==
// @name         Script
// @include      https://checkout.bigcartel.com/*
// @include      http://*.bigcartel.com/product
// @include      http://*.bigcartel.com/cart
// @grant        none
// ==/UserScript==

// on "/cart" page click checkout button
if (window.location.origin !== "https://checkout.bigcartel.com") document.getElementsByName("checkout")[0].click();
else {
    // fill first three form fields
    document.getElementById("buyer_first_name").value = "John";
    document.getElementById("buyer_last_name").value = "Smith";
    document.getElementById("buyer_email").value = "john@doe.com";
    //click button for next section 
    document.querySelector('input[type="submit"][value="continue"]').click();
}

请参阅，并使用WaitFork之类的实用程序

以下是如何等待元素和链状态，以防需要提交单击：

// ==UserScript==
// @name     _Wait for elements overkill and on separate pages
// @match    https://checkout.bigcartel.com/*
// @match    *://*.bigcartel.com/product*
// @match    *://*.bigcartel.com/cart*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

//-- Track form field state, just in case. *Might* be needed for multistage forms...
var glblFlags = {firstFlld: false, lastFlld: false, emailFlld: false};

if (location.hostname === "checkout.bigcartel.com") {
    /*-- Fill first three form fields.
        Use separate WFKE's for multistage.  (Fun overkill for simpler forms.)
    */
    waitForKeyElements ("#buyer_first_name", jNd => {SetValue (jNd, "firstFlld", "John"); }, true);
    waitForKeyElements ("#buyer_last_name",  jNd => {SetValue (jNd, "lastFlld",  "Smith"); }, true);
    waitForKeyElements ("#buyer_email",      jNd => {SetValue (jNd, "emailFlld", "john@doe.com"); }, true);

    //-- Click button for next section
    waitForKeyElements (
        "form[action='/shipping'] button:contains('Next')",
        clickWhenFormIsReady, true
    );
}
else if (location.pathname === "/cart") {
    //-- On "/cart" page click checkout button
    waitForKeyElements ("[name='checkout']", clickNode, true);
}

function clickNode (jNode) {
    var clickEvent  = document.createEvent ('MouseEvents');
    clickEvent.initEvent ('click', true, true);
    jNode[0].dispatchEvent (clickEvent);
}

function SetValue (jNode, flagVarName, newValue) {
    jNode.val (newValue);
    glblFlags[flagVarName] = true;
}

function clickWhenFormIsReady (jNode) {
    //-- Keep waiting if all flags are not true (form not yet filled out):
    for (let prpName in glblFlags) {
        if (glblFlags.hasOwnProperty (prpName) ) {
            if (glblFlags[prpName] === false)
                return true;
        }
    }
    clickNode (jNode);
}

要添加其他表单字段，请执行以下操作：

将新填充的属性添加到glblFlagsobject。例如：

var glblFlags = {firstFlld: false, lastFlld: false, emailFlld: false, phoneFlld: false};

    waitForKeyElements ("#buyer_phone", jNd => {SetValue (jNd, "phoneFlld", "800-867-5309"); }, true);

将新的WaitFork行添加到第一个if部分。例如：

var glblFlags = {firstFlld: false, lastFlld: false, emailFlld: false, phoneFlld: false};

    waitForKeyElements ("#buyer_phone", jNd => {SetValue (jNd, "phoneFlld", "800-867-5309"); }, true);

SetValue的第二个参数是在步骤1中添加的属性的名称。 SetValue的第三个参数是希望在表单字段中填充的值

某些表单控件可能需要特殊处理。那超出了这个问题的范围。如果需要，四处搜索，然后打开一个新问题

---

您需要稍后加载脚本。。。也许可以查阅文档以感谢您的输入。你的代码对我部分有效。我不得不点击结帐按钮，但你的代码填写了三个字段，然后点击了按钮。我遗漏了什么吗？你能解释一下你的Waitfork是如何定义买家的名字jNd=>{SetValue jNd，firstFlld，John；}，true；行可以工作，这样我就可以在编写代码完成表单填写时学习了？是的，您还没有说明问题所在。检查：1个iframe，2个location.pathname，3个匹配语句，4个[name='checkout']。。。另外，链接到目标页面或提供合适的MCVE。谢谢你。我正在尝试为bigcartel商店制作一个自动结账脚本，比如。因此，当某些内容添加到购物车中时，它将完成签出。是否可以使用WFKE从下拉列表中进行选择，例如，WaitForkElements选择[name='shipping\u country\u id']选项[value='42'，单击节点，true；