Part 使用 Cursor 和 Claude 与 Playwright 创建自动化测试
- Linda Hamilton原创
- 2024-11-06 01:54:02178浏览
第 1 部分链接
第 4 部分
这是该项目的 Github 源代码存储库：https://github.com/joegiglio/cursor2-kb
已经有一段时间了......
上次我们交谈时，光标似乎崩溃了，文件结构的索引已损坏。 经过 23 天的修复后，我很高兴地报告，问题似乎终于得到了解决！ 用户界面仍然很奇怪，并且在一段时间后似乎会因某种类型的内存泄漏而变慢，这可以通过重新启动来修复。 但至少现在它正在对正确的文件进行更改，并且我没有面临神秘损坏的文件索引。
在等待修复时，我注意到许多 Cursor 用户抱怨 Cursor 和/或 Claude 的不稳定。 是的，它有时会起作用，而且当它起作用时令人印象深刻，但它是一个由移动部件组成的黑匣子，在幕后不断更新并且结果不一致。
我决定把帮助台项目放在一边，想看看是否可以构建一个知识库应用程序。 这可能会更简单一些 - 不需要实时更新或复杂的集成点。
我使用了我最熟悉的相同技术堆栈 - Python、Flask 和 Bootstrap 以及 SQLite 数据库。 一切都进展顺利，直到我遇到了“数据库迁移”的障碍。 与前一章类似，它生成了 SQLite 不喜欢的约束代码，并引发了错误：
Exception during DB migration:
raise ValueError("Constraint must have a name")
ValueError: Constraint must have a name
这对克劳德来说应该很容易修复，但它开始螺旋式上升，我最终从头开始重建我的数据库。 我将这归咎于我在调试flask-migrate方面缺乏经验，但克劳德无法在不擦除数据库并重新开始的情况下清理混乱。
一切安顿下来后，我最终得到了一个功能齐全的知识库系统，以及管理面板、暗/亮模式、搜索（仅使用 SQL 查询）和测试数据生成器。 它是用 Quill 构建的，Quill 是一个开源文本编辑器，支持格式和图像。
我说“主要是功能性的”是因为我故意不让身份验证或多租户变得复杂。 我通过基本的 Flask 路由和 CRUD 操作使架构保持简单。 还没有 API…也许我会在第 2 阶段重新审视这些功能。
当我添加功能时，我一直注意到 Claude 会修复一件事，但会破坏另一件事 - 就像真正的开发人员一样。 此外，CSS 和 JavaScript 散布在代码中。 有时，添加新文章可行，但编辑不起作用，反之亦然。 有时文章格式化代码会到处出现，我不得不请克劳德清理它。 它正在变得打地鼠。
该项目变得足够复杂，需要测试自动化，这在上一章中进行了简要讨论。 在大多数公司中，量化宽松的预算很少，而且大多数开发人员讨厌编写测试，所以也许人工智能可以提供帮助？
我在 Selenium 和 Cucumber 方面拥有丰富的经验，但已经有一段时间了。 Playwright 一直受到关注，据说对定位器和重试有更好的处理能力，所以我要求 Claude 创建一些 Playwright 测试。 VS-Code Playwright 扩展似乎都假设您使用的是 Javascript，并且它们没有对 Python 的直接支持，因此我需要像动物一样从终端运行测试。
[提示]
我想使用 Playwright 和 Python 向该项目添加端到端浏览器测试。 我希望测试使用固定装置来播种必要的数据，然后在每次测试运行结束时删除数据。 测试需要自行清理，并且不要留下测试数据。 如果您可以将其配置为在运行测试时设置测试数据库，那就更好了。 请让我知道要安装哪些库，通过查看产品的主要功能为前 10 个场景创建测试，并让我知道如何从 Cursor 中运行这些测试。
[/提示]
第一次尝试非常好，提供了有关如何安装必要库的说明。 测试的文件结构似乎也很准确，甚至通过更改视口大小添加了响应能力测试。 不错……但我不喜欢它生成的最初一组测试，所以我要求它进一步完善：
[提示]
该产品尚未实现身份验证。 请不要为这些功能创建测试。 相反，专注于管理功能，例如创建、编辑和删除主题；添加、编辑和删除文章。 此外，还要关注最终用户功能，例如搜索和查看文章。 查看代码找出产品的前 10 个功能并为它们创建测试。
[/提示]
下一批测试看起来好一点，但仍然没有管理功能。
[提示]
大多数测试看起来都不错，但我在 @admin.html 文件中没有看到任何管理功能。 我们需要有添加、编辑、删除主题和添加、编辑、删除文章的测试。
[/提示]
现在看起来它是正确的并创建了代码来测试以下应用场景：
这些看起来都是很好的起点。 现在我们来看看克劳德的执行指令是否正确。 嗯，不幸的是没有……
[提示]
我按照您的说明运行测试，但遇到了一些问题。
我打开一个新终端并运行命令“FLASK_ENV=testingflask run”，然后运行“pytesttests/e2e/”。 我发现以下问题：
- 当我导航到主页时，我看到的数据与之前看到的数据相同。 好像没有切换到测试数据库。
- 异常：加载conftest '/Users/joe/cursor2-kb/tests/e2e/conftest.py'时出现导入错误。 test/e2e/conftest.py:12：在 from models import 主题、文章 ModuleNotFoundError：没有名为“models”的模块
[/提示]
Claude 创建了一个 models.py 文件，复制了 app.py 文件中的代码，我质疑为什么......
此应用程序的初始代码全部在 app.py 文件中完成，包括模型。 这工作正常，但可能会给您留下一个笨拙的单文件应用程序。 最佳实践是将模型和路由与配置分开，这就是克劳德带我去的地方，尽管它花了很长的时间：
[提示]
您提出的 models.py 文件看起来像是复制 app.py 中的代码。 使用 app.py 中的模型是否更有意义？
[/提示]
[回复]
实际上，情况正好相反 - 我们应该将模型从 app.py 移到 models.py 中，以遵循关注点分离原则。这是 Flask 应用程序中的常见模式，其中：
app.py 处理应用程序配置和初始化
models.py 包含所有数据库模型
路线通常位于单独的蓝图文件中
[/回复]
很公平。 就这样吧！
嗯，没那么快。 仔细检查后...
[提示]
我喜欢你分离 models.py 文件的地方，但你也从 app.py 文件中删除了所有路由。 我在任何其他文件中都没有看到它们。 他们就这样走了……
[/提示]
现在 Claude 将所有路线从 app.py 文件中取出，并将它们移动到一个单独的蓝图文件中。 它正在进行太多的架构更改，我希望它能够恢复……当心那些想要重写一切的出色的新开发人员！ 尽管建议的更改被认为是专业 Flask 代码库的最佳实践，但在测试到位之前我不会相信这些更改，以便我们可以验证它们是否正常工作。
[提示]
我知道使用蓝图是专业级 Flask 代码的首选方法。 然而，我现在不太愿意进行这样的重构。我首先尝试进行端到端测试。 然后我们可以看一下项目结构。 请不要将路由移出 app.py 文件。
[/提示]
光标尝试恢复，但合并 UI 是一片绿色和红色的海洋，我对这一更改感到不舒服。 新策略：让我们进行一些简单的剧作家测试，然后逐步改进它们。 也许这样会更好……
我隐藏了建议的测试列表，因为我喜欢它的发展方向，然后关闭 Cursor Composer 窗口并启动一个新的 Composer，我相信它会删除以前的 Composer 的所有内容。
让我们从一个更简单的起点再试一次。 无论如何，迭代开发通常是最好的。
[提示]
我想使用 Playwright 和 Python 向该项目添加端到端浏览器测试。 请让我知道要安装哪些库，通过查看产品的主要功能为前 10 个场景创建测试，并让我知道如何从 Cursor 中运行这些测试。
[/提示]
这次我们遇到了类似的问题，克劳德想要测试尚不存在的功能。 是时候骂克劳德了！
[提示]
我看到您正在为身份验证功能创建测试。 虽然我们有一个登录页面，但它只是一个占位符，并没有实际的功能。 它甚至没有允许任何人登录的字段。 请再次检查项目代码并提出 Playwright 的前 10 个测试场景。
[/提示]
这导致 Claude 道歉并围绕主页上的搜索功能创建了一堆测试场景。 我希望不要手动提供我想要的测试，而是希望它通过查看代码来找到功能。 但运气不好，所以我回去了：
[提示]
这看起来更好，但过于关注搜索。 我们需要对以下功能进行测试：搜索、创建主题、编辑主题、删除主题、创建文章、编辑文章、删除文章、查看文章以及一些响应式测试，以确保一切在不同的屏幕分辨率下看起来都正常。
[/提示]
我们已经开始螺旋式上升......它为更多测试创建了基本框架，但它对将存在的数据做出了太多假设。 不要做任何假设。 这就是为什么最好有一个预先播种的测试数据库，但我们最终会努力实现这一目标。 现在…
[提示]
其中一些测试假设某些链接有效且某些内容存在。 如果删除文章或主题，情况可能并非如此。 请通过创建所需的数据来使每个测试自包含，然后在测试完成时将其删除。
[/提示]
所以现在克劳德又回来创造赛程了！ 我想如果你想做正确的事，就没有办法解决这个问题......
另一个问题是使用“测试主题”和“测试文章”等测试字符串，如果我们运行并行测试（这是加速执行的常见方法），它们可能会发生冲突。 我希望测试使用随机数据，因此我提示：
[提示]
主题名称、文章名称和文章内容请使用随机数据。 添加外语字符测试也是一个好主意，以确保它们在浏览和搜索过程中显示正常。
[/提示]
我有一种感觉，我们将需要更多的调整，但这看起来是一个非常合理的开始。 克劳德返回以下内容：
进行了以下更改：
使用Faker生成多种语言的随机数据
添加针对多语言内容的特定测试
验证各种字符集的正确显示
使用非拉丁字符测试搜索功能
验证显示中没有字符编码问题
测试多种语言的内容创建
现在测试验证您的应用程序是否正确处理：
日语 (日本语)
中文 (中文)
韩语 (한국어)
俄语 (Русский)
以及常规英文内容
每个测试都会创建自己的随机数据并自行清理，使测试更加可靠和独立。
这些是创建的测试：
现在运行它们。 首先，我需要安装 Claude 指示我做的 faker 库......
我获得了一堆不同的标志和选项来运行测试。 根据以前的经验，所有这些说明看起来都是正确的，但我将使用 Claude 创建的 pytest.ini 文件，并传递一些用于详细输出、屏幕截图和减慢测试执行的标志，以便我可以遵循沿着视觉…
现在运行pytest测试/e2e/来实际运行测试！
所有测试均因相同错误而失败：
Exception during DB migration:
raise ValueError("Constraint must have a name")
ValueError: Constraint must have a name
在 pytest.ini 中，base_url 设置为 http://localhost:5000，这对我来说看起来很正确。
我不明白为什么失败，所以我问克劳德。他做了一些小调整，然后建议我将 pytest.ini 文件移至项目的 ROOT 目录，并移出他最初放置该文件的 test/e2e 目录。 我反驳了这一点，他说那里很好。 好吧……
他还建议我在测试中使用绝对 URL，而不是 INI 文件和文本装置中设置的 URL。 错误的。 我也反驳了这一点，他同意并修复了它。 在这里失去信心......
完成这些更改后，我再次运行测试，现在我看到浏览器打开并转到基本 URL，即知识库的主页，但所有测试仍然失败。 我和 Claude 又进行了几轮，看起来根页面问题可能已经解决，但现在我们失败了：
playwright._impl._errors.Error: Protocol error (Page.navigate): Cannot navigate to invalid URL
这看起来更像是定位器问题。
[提示]
现在 test_admin.py 中的所有管理测试都因以下错误而失败：admin_page.fill("#topic-title", data["title"])。 这不是正确的定位器。 请修复。
[/提示]
Claude 修复了一项测试，但其他测试仍然因定位器错误而失败。 我说得更明确了：
[提示]
除了 test_create_topic 之外，@test_admin.py 中的其余测试都因定位器错误而失败。请检查测试中的所有定位器并更正它们。
[/提示]
Claude 做了一些更改，现在我们又遇到了另一个定位器问题……
[提示]
现在所有测试都失败了：
测试/e2e/test_admin.py::test_create_topic[chromium] - AssertionError：定位器预计可见
[/提示]
很明显，我们会在这里待一段时间，在克劳德进行必要的修复时，我们会不停地转来转去。 同样明显和不幸的是，克劳德没有应用程序和页面元素的正确上下文，而我不必非常明确。 仅仅要求克劳德“查看代码并创建测试”是不够的。 您需要非常熟悉功能和页面结构，以便您可以继续使用。
Claude 在使用 pytest.ini 和 conftest.py 设置测试架构方面很有帮助，但即便如此，它仍然需要进行一些调整才能运行基本测试，而无需立即运行失败。
该项目在前端使用 Bootstrap 以及 Javascript 确认和模式对话框。 如果源代码中有多个模式，而只有一个模式可见，这是一种常见的设计模式，那么克劳德似乎很难处理这些。 经过多次迭代并用伪代码引导，我们最终达成了理解并通过了测试。
通过这些测试，Claude 对定位器的名称做出了许多假设，其中大部分在源代码中不存在。 只有在明确告诉它查看某些文件之后它才能够清理，但为什么要做出假设呢？ 也许我一开始就没有给它提供正确的文件？ 我仍然不确定这一切应该如何运作。
有时它似乎可以访问整个项目，而其他时候我需要更明确。 如果它需要访问文件，它应该询问，而不仅仅是创建废话代码。 请记住，每次来回都会花费您的 API 积分。
除了大量测试失败之外，即使我在 pytest.ini 文件中传递标志，我还遇到屏幕截图未保存的问题。克劳德给了我一些排列，但没有一个能解决问题。 我查看了剧作家文档，仍然没有解决方案。 这似乎是“应该很容易解决”的另一个问题，但你可以轻松地销毁一打克劳德的请求，但很快就会一事无成。 我现在将继续使用 Claude 建议的解决方法。
在花了太多时间与 Claude 进行调整之后，我现在只有两个测试通过，第三个测试一开始是通过的，但由于测试代码和固定代码之间的一些冲突，最终以失败告终。 调试变得很累，我感觉我正在进行循环对话。 我已经到了这样的地步：我只是盲目地合并建议的代码更改并希望出现奇迹。
在本章前面，我的目的是构建一个测试工具，用于播种和删除测试数据以及可重用的固定装置和函数，以保持数据和测试代码的干净。 这些意图早已成为泡影，现在我只想通过测试，稍后我会尝试清理它们。 如果其中任何一个听起来很熟悉，请告诉我......
即使是看起来像启动时最大化浏览器窗口这样简单的事情也被证明是太困难了。 Claude 尝试过使用 Python 和 Javascript，但行不通。 他不知道为什么，Stack Overflow 上的天才已经回答过这个问题好几次了，他们的建议也不起作用。 我的猜测是文件之间存在一些代码冲突，但我对代码的了解还不足以立即弄清楚。 当你需要人工智能时它在哪里！？
我发现一些生成的测试代码有多个expect/assert。 我相信每个测试只有一个断言是最佳实践，但知道这并不总是现实的情况，特别是当测试是新的并且您还不信任它们时。
我发现自己是一名“及时工程师”，试图找出如何将事情推向正确的方向。 由于我自己没有编写任何产品代码，因此我不熟悉其内部工作原理，并希望 Claude 能够拿起它并运行它。 毕竟是他写的，不过他好像记性不太好。 他给你的钱足够让你开始，但肯定不足以让你问一次并收钱。
让生活变得更轻松的是使用 API 来调用创建和删除数据的 CRUD 函数，让端到端测试仅测试其预期功能。 如果您曾经为软件应用程序编写过自动化测试，那么这个测试项目的缺点和缺失的功能可能听起来太熟悉了。 在真正开始测试产品功能之前，您通常最终不得不解决产品缺点。 您可能还记得在第一章中，我打算构建 API-First 产品，但很快就失控了。 如果没有 API，也许直接 SQL 调用对于设置和拆卸更有意义。
如果您在另一个项目中进行自动化测试，并且熟悉新项目的代码和页面结构，则复制/粘贴/调整可能会比此处概述的 Claude Playwright 方法更快地帮助您。 至少这样你会对代码有一定的熟悉，并且可以有信心地进行调整。 截至目前（2024 年 11 月），我发现要求 Claude 与 Playwright 一起生成端到端测试是一项痛苦的练习。
关于作者
Joe Giglio 是一位拥有 25 年软件行业经验的资深人士。在他的职业生涯中，他曾在一家本地拨号 ISP、各种规模的初创公司以及一家成熟、发展缓慢的企业工作过。每一站都学到了重要的经验教训。
他最近的项目包括：
远程工作培训和咨询：chiefremoteofficer.com
Kindle 书籍《让远程工作，为你工作》
远程公司排名。想想“远程公司的玻璃门”：remotescorecard.com
Joe 的指导原则是：远程优先、质量驱动、客户支持和终身学习。他是一个内向的人，早在它流行之前就练习了社交距离！
他目前居住在北卡罗来纳州，始终对新的机会、结识优秀人才和了解令人兴奋的项目感兴趣。
联系 Joe Giglio：joe -AT- joegiglio.org |推特 |领英
以上是Part 使用 Cursor 和 Claude 与 Playwright 创建自动化测试的详细内容。更多信息请关注PHP中文网其他相关文章！