javascript - 脚本怎么实现网页元素操作及数值计算？

Question

我想要做出一个自动点击“激励”按钮，然后提取“当前效率”的数值
代入公式\( （100-“当前效率”）×344 \)

计算出结果之后输入到输入框里，再点击确定按钮，并向下循环，直到所有“当前效率”的值都为100。

最好能用浏览器内嵌编译器。

我尝试写了一个脚本,通过Tampermonkey在浏览器中运行。

// ==UserScript==
// @name         自动点击并计算脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  根据网页上的数字自动计算并输入文本，然后自动点击确定按钮
// @author       You
// @match        http://spdq.natapp1.cc/estgzweb/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    
    const specificButtonSelector = 'body > div:nth-child(5) > div > div > div > div.ant-modal-content > div.ant-modal-body > div > div.ant-table-wrapper > div > div > div > div > div.ant-table-body > table > tbody > tr:nth-child(2) > td:nth-child(8)';
    const numberElementSelector = '/html/body/div[4]/div/div/div/div[2]/div[2]/div/div[2]/div/div/div/div/div[2]/table/tbody/tr[2]/td[5]';
    const inputElementSelector = '/html/body/div[5]/div/div[2]/div/div[2]/div[2]/div/div[2]/input'; 
    const confirmButtonSelector = '/html/body/div[5]/div/div[2]/div/div[2]/div[3]/button[2]'; 

    const specificButton = document.querySelector(specificButtonSelector);
    const numberElement = document.querySelector(numberElementSelector);
    const inputElement = document.querySelector(inputElementSelector);
    const confirmButton = document.querySelector(confirmButtonSelector);

    if (!specificButton || !numberElement || !inputElement || !confirmButton) {
        console.error('无法找到所有必需的元素');
        return;
    }

    const numberText = numberElement.textContent.trim();
    const number = parseFloat(numberText); 

    if (isNaN(number)) {
        console.error('无法获取有效的数字');
        return;
    }

    const calculatedValue = 100 - number * 344 ; 

    inputElement.value = calculatedValue.toString();

    specificButton.click()

    confirmButton.click();
})();

但它不能运行，因为我编程能力有限，没能排查出问题。

Answer 1

看着有两个问题：

1. querySelector 选择器写错了；
2. click点击操作不能连着写，要有个先后，还是要根据【点激励->输入->确认 】这个流程去做。

另外，脚本的启动与停止，最好给自己预留一些操作和相关日志监控，方便控制。

Answer 2

Excel VBA 本身并不能直接操作网页元素，因为 VBA 是设计用于操作 Excel 工作簿和 UI 的，而不是用于操作网页。不过，你可以通过几种间接的方式来实现你的需求：

1. 使用外部工具：你可以使用如 Selenium 这样的自动化工具来操作网页，并将结果写回 Excel。Selenium 可以通过 VBA 调用，但通常需要使用其他语言（如 Python、C# 或 Java）来编写 Selenium 脚本。
2. 使用 API：如果网页提供了 API 接口，你可以通过 VBA 调用这些 API 来获取数据，然后在 Excel 中进行计算。
3. IE 浏览器和 Excel VBA 交互（不推荐）：对于旧版本的 Internet Explorer 浏览器，你可以使用 VBA 来操作其 DOM，但这并不是一个好的做法，因为 IE 已经被微软淘汰，且不支持现代网页技术。

考虑到你的情况，我将给出一个使用 Selenium（以 Python 为例）和 VBA 结合的简化流程，但请注意这并非一个完整的解决方案，因为具体实现将取决于你的具体需求和网页的结构。

1. 使用 Selenium 编写 Python 脚本

你可以使用 Selenium 来自动化网页操作，提取所需的数据，然后写回文件（例如 CSV 或 TXT），这个文件随后可以被 Excel VBA 读取。

2. 使用 VBA 读取外部文件

一旦 Python 脚本将数据写入了文件，你可以使用 VBA 来读取这个文件，并在 Excel 中进行进一步的处理。

示例 VBA 代码（读取 CSV 文件）

Sub ReadDataFromCSV()
    Dim filePath As String
    Dim textLine As String
    Dim textRange As Range
    Dim i As Long
    
    ' 设定文件路径
    filePath = "C:\path\to\your\file.csv"
    
    ' 假设第一列是“当前效率”，第二列是计算后的值
    i = 1
    With ActiveSheet.QueryTables.Add(Connection:="TEXT;" & filePath, _
        Destination:=Range("A" & i))
        .TextFileParseType = xlDelimited
        .TextFileCommaDelimiter = True
        .Refresh BackgroundQuery:=False
    End With
    
    ' 在这里添加你的逻辑来处理读取的数据
    ' ...
End Sub

注意：

• 你需要安装并配置 Selenium 和相应的浏览器驱动（如 ChromeDriver）。
• 你可能需要调整 Selenium 脚本以适应网页的实际结构和行为。
• VBA 读取外部文件的方法可能因文件格式而异（例如，对于 TXT 文件，你可能需要使用 OpenTextFile 方法）。
• 如果你决定使用这种方法，请确保你的脚本和数据处理是安全的，并且符合所有相关的法律和隐私要求。