2014年，一个平台被发布，允许用户上传静态网站，并免费在其服务器上托管。这项服务被称为MakerLoop，它似乎是那些只需要简单的托管和存储服务的人的最佳选择。 到2022年，Netlify（由MakerLoop改名而来）将在互联网上为60多万个网站提供服务，并且仍然是免费的（至少在大多数时间）。
你可能会发现，Netlify自概念化以来已经经历了很多变化。随着时间的推移，它背后的平台和策略都有很大的变化。例如，你将它与GitHub整合的方式发生了变化，以方便开发网站及其未来的版本。这对开发和部署是很好的，但它不包括测试。即使你的网络应用站在强大的Netlify支柱上，你仍然需要测试它的视觉元素，以确保所有设备上的统一体验。
这篇关于Netlify测试的文章旨在讨论Netlify所经历的变化，以及它如何使托管网站变得如此容易使用。此外，我们将看看Netlify的功能以及我们如何对托管的网站进行视觉测试。
什么是Netlify？
Netlify是一个基于云的平台，让用户在部署和托管他们的网站时超级方便。如果您想托管一个静态网站，我发现Netlify是互联网上最好的选择。下面的GIF显示了在Netlify上上传和托管一个网站是多么容易。
由于其简单的使用和托管的应用程序的类型，Netlify负责创造了JAMstack（现在简单写成Jamstack）这个术语。渐渐地，Jamstack有了起色，人们对它在客户端而不是在服务器端使用应用程序的逻辑的方法大加赞赏。因此，今天，Jamstack是一种流行的应用设计，有时更适合于容易解耦的网站，更容易维护，对服务器的负荷也更小。
Netlify的最新进展
Netlify开始时是一个静态应用程序托管平台，很快，开发人员意识到他们需要的东西比托管静态页面多得多。为了满足他们的需求，Netlify在两个重要的领域扩展其功能。
- GitHub部署
- 无服务器计算
- Netlify CMS
GitHub部署
在2016年，Netlify为您的静态Web应用程序引入了基于GitHub的部署。一旦您将您的GitHub repo连接到Netlify，您可以部署后续的版本变化，这些变化会自动部署到您的实时Netlify网站。
要做到这一点，请遵循以下步骤。
- 在Netlify中创建一个新的网站。
- 授权Netlify从GitHub获取你的数据。
- 选择您希望连接到的存储库以进行Netlify测试。
- 根据要求配置一些设置。
- 一旦完成，您的网站将被连接并成功部署。
Netlify无服务器
无服务器的世界在网络开发领域并不陌生。在不维护服务器的情况下，计算基于服务器的代码的过程是很容易管理的。Netlify也通过其单独的部分 "Netlify Functions"将其翅膀扩展到无服务器代码。
通过 "Netlify serverless"，后端代码被转换为API端点。你可以用它来获取或检索数据到应用程序的前端。这些端点也可以用来运行后台计算或自动运行到事件响应，用于Netlify测试。
一个例子。
const fetch = require("node-fetch");
const API_ENDPOINT = 'https://cat-fact.herokuapp.com/facts';
exports.handler = async (event, context) => {
try {
const response = await fetch(API_ENDPOINT);
const data = await response.json();
return { statusCode: 200, body: JSON.stringify({ data }) };
} catch (error) {
console.log(error);
return {
statusCode: 500,
body: JSON.stringify({ error: 'Failed fetching data' }),
};
}
};
在这里，一个简单的JS代码可以帮助我们创建一个无服务器查询的端点。
Netlify CMS
Netlify CMS是一个开源的内容管理系统，根据无头架构工作。Netlify CMS可以连接到你的版本控制系统，如GitHub或GitLab，并自动从其中获取数据。还需要注意的是，Netlify与Netlify CMS配合得很好，但并不仅仅限于此。你可以在没有Netlify的情况下使用Netlify CMS，反之亦然。
除了具有直观的用户界面的前端来管理您在Netlify CMS上的内容外，它还具有其他Netlify驱动的功能，使部署和管理更容易。当你想通过版本控制系统来管理你的内容时，它可能是最好的工具之一，而不需要写代码或学习任何关于你使用的VCS的知识。
Netlify驱动的流行网站
今天使用的这些流行的网站是使用Netlify和Jamstack部署的。
Vue
流行的JavaScript框架Vue已经使用Netlify推出了它的官方网站。
耐克活动网站
耐克推出了一个基于活动的网站（justdoit.nike.com），展示了19万用户的故事。它当时使用了Netlify和Netlify CMS。
思杰公司
Citrix在2018年Jamstack会议上提到，他们已经迁移到Netlify，这帮助他们节省了高达65%的成本。
现在为你的Netlify网站运行视觉测试。现在就试试LambdaTest吧!
对不同的应用程序进行Netlify测试
好了!现在，我们可以假设，如果您在Netlify上部署了一个网站，您可能不需要额外的部署或开发指导。但是Netlify的测试呢？即使Netlify让你在几分钟内就能托管一个网站，在这个竞争激烈的世界里，用户有太多的选择，这就足够了吗？如果你的用户发现了网站的错误，我猜他会把它当作AWS托管的网站或Pythonanywhere托管的网站。
那么，对于Netlify的测试，我们有哪些选择呢？
Netlify构建插件
我们测试Netlify应用程序的第一条路径是使用Netlify构建插件。这些插件，比如说Cypress构建插件，可以通过Netlify用户界面页面下载。一旦这些插件被附加到你的版本库中，你就可以通过你的版本控制系统在每次构建时运行它们。
如果没有适合你的插件，你可以随时创建你自己的、具有所有必要功能的插件。安装后，你需要做一些改变，比如设置环境变量或添加项目的依赖性。所有这些步骤都可以根据你要安装的插件而有所不同，因此建议你先看一遍Netlify的官方文档。
使用手工方法
测试人员可以采取的另一种方法是采用手动方式，以传统方式测试网络应用程序。这些方法可能涉及到使用一个个人系统、多个系统或虚拟操作系统。因此，首先，你使用VCS在Netlify上部署你的网络应用程序，然后与你的团队手动验证任何视觉缺陷。你可以使用或不使用自动化测试，但这需要你自己设置自动化连接。
除了这些额外的信息设置，手动方法确实花费了测试人员大量的时间，而这些时间本来可以用于其他活动。一个很好的例子是在不同的浏览器上对网站进行截图以指出它们之间的差异。这增加了测试和应用程序发布阶段之间的时间差距，而且随着Netlify测试期间应用程序变得更加复杂，这种差距可能会继续增加。
手工测试的另一个问题是测试人员缺乏适当的工具来轻松有效地测试应用程序。除了一个浏览器和一个网络应用程序，你可能无法分享你的发现或用角落里的条件进行测试，这在当今竞争激烈的时代是极其重要的。例如，你的元素需要多少时间来加载？你的元素是否一次就加载完毕？网络条件及其对应用的影响如何？
在今天的互联网时代，每分钟都有一个新的网站推出，相对来说，不建议采用人工方法。如果你在此基础上再加上跨浏览器测试，人工可能只是让事情变得更糟，而不是在Netlify测试中进一步改进。
云平台
当涉及到高效的网络测试时，由于各种原因，在线平台似乎是最适合的选择。首先，它们是一个独立的基础设施，不占用测试者系统的任何资源。无论你使用的是4GB内存的系统还是16GB内存的系统，只要你能运行浏览器就没有关系。
其次，在线测试平台提供工具来促进测试过程。它们不仅有助于更快地包装，而且简化了分享和组织我们所有的发现-例如，拍摄屏幕截图，我们意识到这是手工测试中的一个痛点。然而，通过在线工具，你可以从多个浏览器（或其版本）获得多个屏幕截图，而不需要在Netlify测试过程中手动打开每一个浏览器。
最后，在线工具是由致力于为测试人员提供最佳平台的人管理的。因此，一个专门的团队照顾最新的技术和工具，以便在推出后将它们结合起来。因此，如果你正在寻找Chrome 80或Opera 78上的视觉测试，你只需点击几下就能得到。
为了展示在线工具如何帮助你更好地测试，我将使用最流行的云测试平台之一LambdaTest。基于云的跨浏览器测试工具，如LambdaTest，允许你在3000多个浏览器和操作系统的在线浏览器农场上对你的Netlify网站进行手动和自动测试。
然而，在开始进行实际的视觉测试之前，您可以在LambdaTest上注册，一起继续测试，以便更好地了解。
当您登录到您的仪表板时，右边的面板将显示LambdaTest提供的三种视觉Netlify测试。
- 屏幕截图
- 响应式
- 智能型
让我们来简单地看看它们各自的特点。
用LambdaTest进行屏幕截图视觉测试
LambdaTest中的截图视觉测试省去了人工工作，一次最多可对25个浏览器进行截图，供您分析。要进行屏幕截图测试，请进入屏幕截图面板并按照以下步骤操作。
- 选择你希望测试的目标操作系统和浏览器。
这里我从25个浏览器中选择了15个。 - 在上面的输入栏中输入网站的URL。
- 点击 "捕捉"（CAPTURE），在所有选定的浏览器上捕捉屏幕截图。
这里可以选择以PDF形式下载所有的屏幕截图，或以压缩文件的形式下载，或与其他成员分享。 - 你还可以通过点击最后一个面板上的齿轮图标来改变你的偏好。
- 如果需要，还可以根据需要的频率、时间或日期安排截图。
用LambdaTest进行响应式视觉测试
说到视觉测试，应用程序的响应特性是你完全不能错过的东西。如果你的网站不能根据用户的屏幕进行调整，这将成为一个严重的问题，因为今天有一半以上的互联网流量是来自于移动设备。
LambdaTest提供了一系列的移动设备和桌面屏幕（共56个），已经为测试目的设置好。一旦测试人员输入了他想要测试的URL，它就会被加载到每个屏幕上，并准备好被可视化，以发现任何响应性的错误。
请看我们的视频，了解更多关于响应式视觉测试的信息：
要进行响应式视觉测试，请遵循以下步骤。
- 点击视觉UI测试下拉选项中的响应式。
- 输入URL并按GENERATE。
上面的图片显示，网站在所有选定的屏幕上被加载。你也可以从你的目标矩阵中取消选择任何设备。测试人员还可以利用旋转设备和调试网络应用的优势，以及其他功能
用LambdaTest进行智能视觉测试
LambdaTest中最独特和最有帮助的视觉UI测试功能之一是智能视觉测试。智能视觉测试的目的是找出两张图片之间的差异，如图标大小、颜色、文字等。
当你手动执行测试时可能会忽略细微的差异，它就会派上用场。
要进行智能视觉测试，请遵循以下步骤。
- 通过点击 "+"图标上传一张基线图片，以执行智能视觉测试。这张图片将作为一个参考，指出与其他图片的区别。
- 接下来，通过点击上传比较图像上传比较图像。
你也可以上传多个基线和比较图像。 - 现在，点击对比图像上的 "运行"按钮。
- 当比较成功运行后，图像上有一个查看问题的按钮，如下所示。
这将显示比较图像中与基线图像相比的所有问题。
你的Netlify测试体验
Netlify给网络应用程序部署过程带来的变化是超乎想象的。在几秒钟内部署一个静态网站而不用担心基于服务器的配置，这对开发人员来说是一个梦想。然而，仅仅是网站部署并不能完成我们的工作。部署后需要关注的主要任务是在各种浏览器、操作系统和设备上测试网站是否有视觉缺陷。
在这篇文章中，我们介绍了三种方法来完成这项任务。第一种方法，Netlify插件，一旦与 repo连接，就可以在每次构建时运行你的测试。但是Netlify插件大多是为测试应用程序的功能而开发的端到端测试流程。对于视觉测试，你可能要建立你的UI测试插件（如果可能），因为涉及到视觉元素。这个要求给我们带来了第二个选择，如果是你的系统或自动化框架，通过手动方式使用一切。
最后一种选择，推荐的方法是使用在线工具进行视觉布局测试。像LambdaTest这样的在线视觉测试平台不仅为你的本地资源提供了缓解，而且是先进的，维护的，总是最新的。当你启动一个新的浏览器时，它与以前的版本同时在云平台上提供。这加快了工作速度，为我们提供了一个安全的平台，并通过额外的功能促进了测试。
但这最终可能是我对Netlify测试的观点，来自我作为一个开发者和测试者的可炫耀的经验。我们希望在下面的评论部分听到您的观点。这可以帮助社区为他们的Netlify网站选择最好的Netlify测试方法。我希望这篇文章对你的下一个或当前的项目有所帮助。
祝您在Netlify测试中愉快!
常见的问题（FAQ）
我如何在本地测试Netlify？
要在本地服务器上测试Netlify，您需要运行Netlify dev作为您项目目录的一部分。确保你的函数可以访问项目的环境变量。然后它应该能够在一个与你的网络项目相似的端口上提供服务。
Netlify需要多长时间来部署？
最值得注意的Netlify CLI功能是Netlify部署命令，用于将本地的Netlify网站直接部署到实时部署的预览中，不需要等待运行Netlify CI进程。所花费的时间可能会在几分钟内完成。这取决于您的构建规模。
Netlify可以处理多大的流量？
这取决于您选择的计划。以下是它可以处理的流量。
免费计划。一个月100GB的带宽
专业计划。一个月400GB的带宽
商业计划。一个月600GB的带宽
