Javascript 点击按钮以允许网页在点击之间进行处理

我正在尝试自动化我的页面测试用例，以便用户能够从Chrome扩展中按下一个按钮（更新），并且对于与我想要的网页上的类匹配的每个按钮，一次一个，循环它们：

更新：匹配：

class=“updateButton”

。需要单击一次。单击后，网页将在某个点将按钮转换为“保存”状态

保存：匹配：

class=“saveButton”

。需要单击一次。单击后，网页将在某个点将按钮转换为“已保存”状态

保存：当按钮到达这里，我们就完成了这个按钮

在每个按钮进入“保存”状态后，我们可以转到下一个按钮。我想处理所有匹配的按钮，直到“保存”状态

我很接近。然而，当我得到

document.getElementsByCassName（“saveButton”）

的数组长度时，它总是返回1，这很奇怪。用户单击“保存”后，它应返回0

manifest.json

content_script.js：

函数睡眠（毫秒）{
var start=new Date（）.getTime（）；
对于（变量i=0；i<1e7；i++）{
如果（（新日期（）.getTime（）-start）>毫秒）{
打破
}
}
}
函数clickUpdate（）{
var updateArray=document.getElementsByClassName（“updateButton”）；
var updateArraySelector=document.querySelectorAll（“.updateButton”）；
var saveArray=document.getElementsByClassName（“saveButton”）；
var延迟=0；
setSelectedValue（对象选择，“P”）；
对于（var a=0；a

popup.js

//popup.js
函数injectTheScript（）{
chrome.tabs.query（{active:true，currentWindow:true}，函数（tabs）{
//查询活动选项卡，该选项卡将仅为一个选项卡
//并将脚本注入其中
executeScript（tabs[0].id，{file:“content_script.js”}）；
});
}
document.getElementById（'clickactivity'）。addEventListener（'click'，injectTheScript）；

popup.html：

活动
更新

正如您所确定的，问题在于内容脚本如何尝试在单击按钮时循环

问题的很大一部分是使用了一个延迟，

sleep（）

以直接循环的方式实现。在JavaScript中几乎不应该这样做。这样做可以防止其他代码运行。它通常会导致一些问题，CPU使用量达到最大值

实现延迟的正确方法是异步的。一般延迟可通过以下方式获得：。关键是延迟需要是异步的，以允许其他代码运行，以便它能够完成您想要的任务。如果希望监视DOM中的更改并收到更改通知，则应使用而不是

setTimeout（）

实现

setTimeout（）

循环 有很多方法可以组织你正在做的事情。下面，我实现了一个

setTimeout（）

循环，它基本上是一个在延迟后调用自身的函数，如果不满足某些条件

对于这个循环，我们需要的第一件事是一个函数，它将按顺序单击下一个按钮并返回一个

true

，直到不再有需要单击的按钮，此时它返回

false

：

函数单击下一步按钮（）{
//这将按我们希望的顺序单击“下一步”按钮。
//单个按钮从“更新”（单击）->“保存”（单击）->“保存”移动。
//在我们找到的第一个按钮不在列表中之前，不会单击其他按钮
//“更新”或“保存”状态。
//当没有更多按钮可点击时，返回false；
//如果有一个按钮处于“保存”状态，那么我们需要首先处理它并
//在“保存”按钮更改为“保存”之前，不要移动到下一个“更新”按钮。
var firstSaveButton=document.querySelector（'.saveButton'）；
如果（第一个保存按钮）{
让myFlagClass='myExtensionNameSaveClicked'；
if（firstSaveButton.classList.contains（myFlagClass））{
//我们已单击此按钮。我们需要等待它更改状态。
return true；//可能还有很多事情要做。
}//否则
firstSaveButton.classList.add（myFlagClass）；
firstSaveButton.click（）；
return true；//可能还有很多事情要做。
}//否则
//当前没有处于“保存”状态的按钮。
//检查是否有处于“更新”状态的按钮。
var firstUpdateButton=document.querySelector（'.updateButton'）；
如果（第一次更新按钮）{
让myFlagClass='myExtensionNameUpdateClicked'；
if（firstUpdateButton.classList.contains（myFlagClass））{
//我们已单击此按钮。我们需要等待它更改状态。
return true；//还有很多事情要做。
}//否则
firstUpdateButton.classList.add（myFlagClass）；
firstUpdateButton.click（）；
return true；//还有很多事情要做。
}//否则
//没有处于“更新”或“保存”状态的按钮。我们完成了。
返回false；
}

删除重复代码：迭代按钮类型 作为

{
    "manifest_version": 2,
    "name": "My Chrome extension",
    "description": "My Chrome extension",
    "version": "1.0",
    "permissions": [
        "tabs",
        "https://mywebsite.com/*",
        "storage"
    ],
    "browser_action": {
        "default_icon": {
            "30": "images/icons/30.png",
            "48": "images/icons/48.png"
        },
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "images/icons/16.png",
        "20": "images/icons/20.png",
        "30": "images/icons/30.png",
        "48": "images/icons/48.png",
        "128": "images/icons/128.png"
    }
}