LLM Generated web and Playwright E2E Testing

LLM生成的网络和播放者-E2E测试

介绍

该项目是一个侧重于使用LLM（Chatgpt 4，Claude）生成HTML，CSS和JavaScript代码的实验，该实验通过提示来满足用户需求。

在由实验人员手动制作剧作家测试脚本之后，然后将提示发送到LLMS，以生成可以完全满足所有用户需求的剧作测试脚本。

比较了手动制作和生成的剧作脚本，并根据结果，使用LLMS生成纯粹的前端网页并自动生成E2E测试脚本的可行性。

实验设置

总共将有四个独立的实验（Test1〜Test4），每个测试由其他开发人员进行。每个实验将具有不同的任务，即IE，用户要求，由与Web相关的任务组成，可以使用HTML，CSS和JavaScript解决这些任务。任务是在每个测试文件夹中的PDF文件中提供的。

该实验将分为以下三个任务：

1。LLM生成的完整网页提示测试

任务说明：

由于将测试两个LLMS（Chatgpt-4，Claude），因此将根据实验指定要测试的LLM。提示将给分配的LLM，这些提示需要包括任务的所有要求，例如UI设计，交互模式和任务中所述的功能。提示应遵循类似于用户故事的叙事结构。

每种结果的重大改进和所使用的提示都应记录在prompts_record.md文件中，以供以后分析。测试将继续进行，直到LLM生成的代码满足任务的所有要求（最初由手动进行判断）。

可交付成果：

• 记录每个重大改进和所使用的提示的MARKDOWN文件（ prompts_record.md ）。
• 符合任务要求的网页代码（HTML，CSS，JavaScript）。

2。写剧作家测试脚本

任务说明：

使用剧本框架，在打字稿中为给定的任务编写E2E测试。该测试脚本应验证LLM生成的代码是否满足要求。此外，需要指示LLM将data-testid和aria-label属性添加到相关的HTML标签中，并且应将这些属性用作测试中的选择器，而不是CSS选择器（主要目标是使参与者熟悉使用Playwright进行自动测试的参与者）。

可交付成果：

• 使用剧作作者编写的打字稿E2E测试脚本。

3。LLM生成的剧作家测试脚本

任务说明：

提示将发送给分配的LLM，以使用playwright在打字稿中生成E2E测试脚本。此测试脚本应该能够验证满足所有任务的所有要求。与第一个任务相似，每个重要的改进和所使用的提示都应记录在prompts_record.md中进行分析。

可交付成果：

• 记录每个重大改进和所使用的提示的MARKDOWN文件（ prompts_record.md ）。
• 符合任务要求的LLM生成的打字稿E2E测试脚本。

实验测试仪

Yuankai619用于test1

Owen0806用于test2

Zihan0221用于test3

test4

实验结果

每个剧作家测试脚本的快照：https：//yuankai619.github.io/llm-generated-web-and-playwright-e2e-testing/

测试	网页满足要求吗	测试脚本是否完全涵盖了测试
Test1	✅	✅
Test2	✅	✅
test3	✅	✅
Test4	✅	✅

测试	发给LLM生成Web的提示迭代次数	授予LLM的提示迭代数量以生成测试脚本
Test1	4	5
Test2	3	2
test3	3	5
Test4	2	1

结论

根据四个测试的结果，我们可以得出结论，当前的LLM能够迭代生成在人类监督下满足要求的Web代码。此外，他们可以根据给定的要求和指定的框架生成相应的剧作E2E测试框架。但是，一致的人类监督和迭代对于获得令人满意的结果至关重要。

Test1是一个主要示例。该任务需要“随机性”，这在生成可以有效处理这一方面的测试方面给LLM带来了挑战。此外，如果将故意延迟写入JavaScript中，则生成的测试通常无法正确考虑它们。

因此，如果目标是让LLMS根据源代码和要求自动生成测试，则还必须考虑将测试中的错误与代码本身中的错误区分开的挑战。这是需要进一步探索的领域。