照片由 Denny Müller 拍摄，来自 Unsplash

Grand View Research，"全球自动化测试市场在2022年的规模估计为25.43亿美元，预计到2030年将以17.3%的复合年均增长率（CAGR）增长。" [1]

我的测试自动化之旅大约始于1995年，那时网页应用还很少见，桌面软件才是主流。尽管UI自动化相对简单，但时常不稳定，为什么呢？这可真是个问题。可靠且重复的UI自动化面临的挑战主要是对象识别和同步操作，这两个元素一直是个难题。

如今，web 应用程序无处不在，然而 Web UI 自动化测试依旧是一项挑战，原因也没有改变。使用 Angular 和 React 等框架的 web 应用程序有复杂的生命周期过程。Web 工程师必须同步数据和 UI 的复杂过程是一项艰巨的任务。那么，测试工程师们还有希望吗？

这些痛点已经被Playwright和Cypress这样的工具尽量解决了。修改底层HTML以创建交互钩子的标准做法已经出现。接下来会是什么呢？可能是机器学习。在本文中，我会介绍一些我用来尝试解决这个问题的机器学习方法。

我的挑战是：如何在不直接操作HTML代码的情况下，登录任何网站而不使用底层HTML与对象交互。

这里需要说明一点，这个假设性想法并不是关于网页抓取或使用机器人程序，而是因为庞大的网站数量，其中包含各种用户认证方式的变体，因此选择了这个想法。

网站上的典型登录验证通常从“登录”或“Sign In”按钮开始。实际上，用户在继续之前也经常需要接受 Cookie 通知。剩下的过程大家通常都挺熟悉的，除了少数例外！

现在我们来拆解每个过程为机器学习的不同领域，并解释为什么选择这些领域。

接受、注册、登录通常被看作按钮，因此一般来说我们只需要一个点击操作。“Click()”。输入框需要“Click()”和“Type 事件”。这些都是大多数 web 应用程序所需的人机交互操作。

在这个简单的用户认证示例中，我使用了以下机器学习的领域。

• 目标检测
• 分类识别
• 分割处理
• 自然语言理解和文本处理

用户认证：流程图

当我们使用一个典型的网页应用时，人脑会寻找特定的关键词。我们已经习惯了寻找特定的关键词，这些词通常是按钮或链接上的文字，或者是我们应该用鼠标点击的对象。表单字段通常被框起来，因此我们已经习惯了按照例子来找到它们。

在转换每个任务时，我们也可以将其分解为用户交互。这样，物体检测和分类识别是主要分支，但我们还需要处理文本，并定位或包围某些对象。

目标检测（按钮和链接）

该模型是使用Yolov9搭建的，数据集没有进行任何增强处理。一共有9个类别，但是像Register这样的类别样本却非常少。

我用来构建物体检测部分的数据集包含以下主要类别。数据集包含440张网站截图，分辨率为1024x640，并已标注。

https://universe.roboflow.com/flerovium/auth-detection/

登录是最常见的操作，还可以是 Log in 或 LOGIN——实际上，还有许多不同的写法和变体。

因此，目标检测在识别每个类别方面表现非常好。直到模型在类似物体上产生混淆，例如 Sign In 和 Sign Out。

模型指标显示，随着准确率的提升，曲线表现得很平稳。训练周期为25个，虽然需要大量的GPU处理，但我可能可以把这个数字调低一些。在30个周期的模型运行中，我确实看到了过拟合，但数据标注真的不太好玩，不过这次的准确度已经足够用了。

目标检测训练的指标

不过，Roboflow 有一个很棒的功能，让你用自己的模型来做标注预测。我尽量让边界框紧贴物体，因为这在很大程度上提升了模型的准确性。

为了解决检测到的相似对象的问题，我使用了单类分类来重新验证初始预测的类别。这就需要建立一个工作流程，而Roboflow在这方面做得很好。

模型在登录和接受等类别上的准确性非常高。这可能是由于表示和位置的原因。登录按钮通常位于图像的右上角，而接受按钮则经常出现在图像的底部。

使用了动态裁剪来提取预测的类别。最初预测值设置得较高，大约60%，然而我发现Yolov9模型在较低的置信度下不会频繁输出结果。因此，将目标检测置信度阈值设为10%，并将最大检测次数设为5。

目标检测和分类流程

这个模型是用Yolo8n创建的，数据集包含2500张图片，我使用简单的脚本来生成这些图片的多个版本及其变体。我假设大多数网站采用常见的字体风格。例如，“登录”比“LOG IN”更常见，所以我按照这种方法处理了文本，按照同样的方式对文本进行了处理。

我也对此分类使用了增强数据，这大概生成了一个含有6000张图片左右的数据集。

https://universe.roboflow.com/flerovium/auth-classification/dataset/5

工作流程的整体结果相当有前景。整合预测结果，我可以可靠地重新确认或构建一些简单的逻辑以确保正确的结果。如果在对象检测阶段登录、注册或签到出现误判，分类几乎正确地预测了这些值。

完全未能检测到物体只有在遇到显著差异的情况下才会发生，比如Comic Sans或非常特别的字体。这些字体可能会被10%的对象检测过滤器忽略。

最初考虑过将输出数据输入给第三个模型。虽然我希望能做到零代码，并且考虑过采用某种形式的元建模。我意识到在我的案例中，这其实很容易通过逻辑解决。我也担心，连续堆叠模型会引入其他因素。

所以我这个“零编码”，实际上是指没有HTML/CSS的浏览器对象的互动，现在看起来相当整洁。

    await pageManager.navigateTo("https://www.codecademy.com");  
    homePage = new HomePage(pageManager.getPage());  

    等待主页的同意按钮被点击（await homePage.accept.click();）;  
    等待登录按钮被点击（await homePage.logIn.click();）

上面的例子使用了puppeteer，如下是按钮元素的代码块。

export type UIElementButton = {  
    click: () => Promise<void>;  
    label: string;  
    model: "表单分割" | "认证检测";  
}  

这听起来都很好，不过还有一些工作要做。我该如何实际点击这个对象呢？由于模型返回的 JSON 包含了坐标，我们可以通过 Puppeteer 发送这些坐标。我已经在事件触发前标记了点击的位置。

这个模型是基于Yolov8s，包含45张图片，这些图片中包含用户名和密码相关的输入框。表单字段一般有两种处理方式。第一种是在文本或字段标签上方添加文本，或者在输入框内放置占位符。有时候标签在上方，同时还有额外的占位符。

数据集通过数据增强（例如15%旋转）扩大了规模。这使得数据集的大小增加到了107张图片。

https://universe.roboflow.com/flerovium/boxes-pxtje/model/6

分词的结果令人惊讶地准确，通常能达到80%的准确度。不过，确定输入框的用途却是个难题。用户名的输入方式多种多样，而识别正确用户名则需要基于文本的模型的帮助。

最初，我的工作流程是接收输入的截图并识别出分割的区域，接下来OCR会识别每个区域内的文本。

OCR分段提取工作流程

Roboflow 提供了一个很棒的功能，允许你使用内置模型。在这个工作流中，在目标检测之后，Roboflow 插件自带的 OCR 模型被用来提取边界框内的文字。

分词处理和OCR JSON输出

使用两个模型叠加后的结果真的很惊人，我们现在可以定位并提取输入字段和它关联的文本。

很遗憾，Roboflow 没有上传自定义模型文件到工作流的功能。我们现在知道了输入的位置信息和相关的文本信息，只需要分辨出用户名和密码。

据我们所知，使用简单的逻辑回归模型时，文本分类能够取得很好的效果。

    from sklearn.feature_extraction.text import CountVectorizer  
    from sklearn.linear_model import LogisticRegression  
    import joblib  

    X = [  
        "email", "username", "user id", "please enter username", "email address", "user name",  
        "password", "password123", "enter password", "please enter password", "user password"  
    ]  
    y = ["username", "username", "username", "username", "username", "username",  
         "password", "password", "password", "password", "password"]  

    vectorizer = CountVectorizer()  
    X_vect = vectorizer.fit_transform(X)  

    model = LogisticRegression()  
    model.fit(X_vect, y)  

    joblib.dump(model, "classification_model.pkl")   
    joblib.dump(vectorizer, "vectorizer.pkl")

结果相当令人印象深刻。以用户名为例，‘Email*’字段的文本值准确率为71%。因此，通过简单的逻辑，我们可以再次查看原始分段模型的输出结果，提取我们需要的坐标位置。

    接收到的预测结果如下: [  
          { label: 'password', probability: 69.06, text: '密码*' },  
          { label: 'username', probability: 71.55, text: '账号名*' }  
    ]

最后是用于 Puppeteer 与输入框交互的代码。

    export type UIElementInput = {  
        click: () => Promise<void>;  
        fill: (keys: string) => Promise<void>;  
        label: string;  
        model: "form-segmentation" | "auth-detection";  
    }  

    await pageManager.navigateTo("https://www.codecademy.com");  
    homePage = new HomePage(pageManager.getPage());  
    // 点击接受/登录操作
    await homePage.username.fill("usermame@example.com");  
    await homePage.password.fill("Password123!");  
    await homePage.login.click();

一旦找到输入框，Puppeteer 就会点击并输入按键。

经过机器学习和输入交互处理后的图像

测试自动化市场庞大，工程师的入门门槛随着底层网络技术的不断变化而不断变化。这表明Web界面测试成本高昂，不仅仅体现在维护成本上。使用更稳健的技术，如组件模拟，可以减少所需的UI测试数量，进而降低整体测试成本。但这并不能完全消除测试成本。因此，尽管组件模拟可以减少测试数量，但并不能彻底解决问题。

之前的测试自动化两个痛点因素，对象识别和同步问题，并没有因为这种方法而消失。我仍然发现自己不得不等待与对象互动，或者不确定何时应该截图。事实上，这里有一些问题，但还不止这些。

关于机器学习和用户界面自动化的那些问题

然而，这只是其中一种方法，我认为没有理由认为将来无法构建自定义网站相关模型。准确地提取表单字段让我感到惊讶，而且交互事件，如“点击”和“打字”，也非常直观。

我没有提到如何从网页中提取信息。之前我用过分类技术https://www.npmjs.com/package/playwright-classification，使用的是playwright这个库。同样，这需要对图像进行很多分类思考。

我也可以看出提取表格也是一个需要考虑的因素，另一个库 https://www.npmjs.com/package/playwright-tables 可以用来构建数据表以提供测试预期结果。

也有可能将比如像chatGPT这样的Transformer架构模型叠加在Web交互模型之上。下面的陈述很可能是多次测试中常见的。

    假设我是鲍勃·桑德斯，并且持有有效的凭证
    当我在系统上完成身份验证时
    那么我应该能够查看我的账户信息

代码也是相当简洁，可以在下面这个链接找到：https://github.com/serialbandicoot/puppeteer-metal。[2]

我的方法还是有点飘忽不定，但解决了问题吗？

我认为不久之后我们就能看到新兴公司和像 Playwright 这样的大企业加入进来。因为最终这将成为数据科学领域的问题，解决视觉回归问题，因为虽然重复且枯燥，但却极其重要。Web UI 自动化测试任务仍然至关重要。

我给你留下一个完整的演示视频，请在视频中注意终端显示的预测值和模型输出的流量，这无疑就是未来的趋势，相信你会感兴趣的。

关于作者：

桑姆·特里维克已有超过20年的质量保证工程师经历，积累了多个行业的经验。机器学习一直让他非常感兴趣，而在暂停了计算机科学硕士学位的学习后，他意识到机器学习的应用终于开始对他的客户产生了实际的影响。视觉回归测试特别吸引了桑姆的关注，在参与一个空间天气项目时，他提出了一个问题：当SDO AIA-0335图像不断变化时，还可以用什么方法来测试它？

1. Grand View Research. 市场研究报告，包括市场规模、份额及趋势分析，按测试类型、服务、端点接口、企业规模及垂直领域的细分市场预测，2023–2030. 于2024年12月4日从https://www.grandviewresearch.com/industry-analysis/automation-testing-market-report 获取。

2. 您需要创建一个Roboflow账户，如需运行完整程序，有关详情请参阅ReadMe。这还需要使用Docker运行Roboflow本地服务器。如需更多帮助，可通过repo的Issue与我们联系。