使用 CrossBrowserTesting 编写可靠的多浏览器测试套件
Posted: Sun Dec 01, 2024 10:57 am
Leadfeeder 的系统由多个应用程序组成，主要用 Ruby 编写。我们希望确保每个组件都能按预期运行，因此我们用单元测试覆盖代码，对于 Rails 应用程序，还用控制器规范覆盖代码。
然而，有时良好的单元测试覆盖率可能还不够，仍然可能导致经典的“2 个单元测试，0 个集成测试”的情况，就像下面的 meme 中的情况一样：
浏览器测试模因
为了防止这种情况，针对系统中更关键的部分，我们会编写涵盖从上到下的整个功能的 UI 测试。
我们必须处理的一个主要问题是，我们的应 2024 年更新的全球电话号码列表 用可能可以通过任何设备/浏览器访问。尽管浏览器开发人员试图遵守标准，但每个浏览器的行为都略有不同。
哦，还有 Internet Explorer...
您可能已经想到，我们不会针对市场上所有浏览器运行手动测试。相反，我们开发了自己的测试工具包，该工具包可在CrossBrowserTesting 平台上的一组真实设备上运行一套测试。
在这篇文章中，我想一步一步地向您展示我们如何整合所有活动部件以创建这样的工具包——希望您也可以在自己的项目中设置类似的东西。
阅读完本文后，您可以在此存储库中找到整个代码。
注意：免费试用Leadfeeder 14 天。您没看错，免费试用两周。
步骤 0 - 准备被测应用程序
让我们准备一个名为 LinkShortener 的简单 Rails 6.1 应用程序。它的唯一用途是根据用户提供的 URL 创建短链接。类似于 bit.ly 的功能。
该应用程序既不美观（我将使用 Rails 生成器生成的默认视图），也不用户友好，但它足以编写一个简单的 UI 测试套件。
该应用程序由四个端点组成：
get "/short_links/new" - 显示创建新短链接的表单
post "/short_links" - 在数据库中保存新的短链接
get "/short_links/:id"- 显示有关链接的信息
get "/l/:slug"- 将用户重定向到存储在 ShortLink 记录中的原始 URL。
继续 - 在本地检查存储库并通过运行 rails 服务器和访问来试用该应用程序localhost:3000。
短链接 GIF
步骤 1 - 设置 RSpec 和 Capybara
在 crossbrowsertesting.com 上使用真实浏览器测试应用程序之前，让我们先从小处着手，编写一个简单的RSpec测试套件，该套件将由Capybara使用 Chrome 驱动程序执行（确保您已预先安装了 Chrome 浏览器）。
首先，让我们将必要的宝石添加到 Gemfile：
end
end
现在让我们通过调用来运行测试套件$ bundle exec rspec。输出应如下所示：
然而，有时良好的单元测试覆盖率可能还不够，仍然可能导致经典的“2 个单元测试，0 个集成测试”的情况，就像下面的 meme 中的情况一样：
浏览器测试模因
为了防止这种情况，针对系统中更关键的部分，我们会编写涵盖从上到下的整个功能的 UI 测试。
我们必须处理的一个主要问题是，我们的应 2024 年更新的全球电话号码列表 用可能可以通过任何设备/浏览器访问。尽管浏览器开发人员试图遵守标准，但每个浏览器的行为都略有不同。
哦，还有 Internet Explorer...
您可能已经想到，我们不会针对市场上所有浏览器运行手动测试。相反，我们开发了自己的测试工具包，该工具包可在CrossBrowserTesting 平台上的一组真实设备上运行一套测试。
在这篇文章中，我想一步一步地向您展示我们如何整合所有活动部件以创建这样的工具包——希望您也可以在自己的项目中设置类似的东西。
阅读完本文后，您可以在此存储库中找到整个代码。
注意：免费试用Leadfeeder 14 天。您没看错，免费试用两周。
步骤 0 - 准备被测应用程序
让我们准备一个名为 LinkShortener 的简单 Rails 6.1 应用程序。它的唯一用途是根据用户提供的 URL 创建短链接。类似于 bit.ly 的功能。
该应用程序既不美观（我将使用 Rails 生成器生成的默认视图），也不用户友好，但它足以编写一个简单的 UI 测试套件。
该应用程序由四个端点组成：
get "/short_links/new" - 显示创建新短链接的表单
post "/short_links" - 在数据库中保存新的短链接
get "/short_links/:id"- 显示有关链接的信息
get "/l/:slug"- 将用户重定向到存储在 ShortLink 记录中的原始 URL。
继续 - 在本地检查存储库并通过运行 rails 服务器和访问来试用该应用程序localhost:3000。
短链接 GIF
步骤 1 - 设置 RSpec 和 Capybara
在 crossbrowsertesting.com 上使用真实浏览器测试应用程序之前，让我们先从小处着手，编写一个简单的RSpec测试套件，该套件将由Capybara使用 Chrome 驱动程序执行（确保您已预先安装了 Chrome 浏览器）。
首先，让我们将必要的宝石添加到 Gemfile：
end
end
现在让我们通过调用来运行测试套件$ bundle exec rspec。输出应如下所示：