首页 > web前端 > js教程 > 正文

如何为初学者在 VSCode 中构建天气应用程序(响应后自动化测试

Susan Sarandon
发布: 2024-11-08 00:45:03
原创
940 人浏览过

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

之前我们一起搭建了一个天气应用后端,但是我们如何确保返回的结果是我们期望的呢?虽然手动检查输出中的小响应很容易,但如果返回的数据很大或难以逐行验证怎么办?

今天,我们将更深入地探讨如何使用 EchoAPI 中的 Post-response 来自动化测试过程。这将使我们能够自动检查 API 响应是否符合我们的预期,从而节省我们的时间和精力。

要使用 EchoAPI 自动执行测试,您将使用其 响应后 功能来编写在 API 请求后自动运行的脚本。这些脚本有助于验证 API 响应的正确性,并确保即使您稍后进行更改,应用程序也能按预期运行。

让我们详细介绍如何使用 EchoAPI 自动化天气应用测试。

使用 EchoAPI 自动化测试的步骤

在 VSCode 中设置 EchoAPI

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

确保您在 VSCode 中安装了 EchoAPI for VS Code 扩展。安装后,您将能够在 EchoAPI 界面中测试和自动化请求。 免费使用!!!

创建 GET 请求:

将方法设置为GET

使用以下 URL 来测试天气 API:

http://localhost:3000/weather?city=London
登录后复制
登录后复制
登录后复制

点击“发送”以确保您的请求有效并返回正确的天气数据。您应该在 Response 中看到如下 JSON 响应:

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

添加后响应脚本

现在您已经手动测试了天气 API,让我们添加自动化测试来验证响应数据。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

转到 EchoAPI 中的响应后选项卡来处理您的请求。

添加响应后脚本,使用JavaScript自动检查天气数据。

这是一个简单的后脚本示例,用于验证:

  • 响应状态为200(正常)
  • 响应包含温度字段,并确保'温度'是一个数字
  • 响应包含 天气 字段,并确保 'weather' 字段是字符串
  • 响应包含 City 字段,并确保 'city' 字段是字符串
http://localhost:3000/weather?city=London
登录后复制
登录后复制
登录后复制

运行测试

添加测试脚本后,再次点击“发送”即可运行您的请求并自动执行测试脚本。

然后点击右侧的“测试结果”。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

测试结果将显示检查是否通过。
如果一切顺利,您将看到类似以下内容:

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

通过更多任务自动化后期响应(可选)

如果您想要执行多个响应后自动测试,您可以在响应后部分添加其他任务。这使您可以一次性运行所有测试。

我们可以为多个城市添加不同的请求、错误场景,并将特定的测试脚本附加到我们案例中的每个城市。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

错误检查

为了确保您的应用能够处理各种场景,您可以修改请求并测试错误情况。

例如,使用无效的城市名称进行测试:

将请求 URL 更改为无效的内容:

// Check if the response status is 200 (OK)

pm.test("Status code is 200", function () {
  pm.response.to.have.status(200);
});

// Check if the response has 'temperature', 'weather', and 'city' fields

pm.test("Response contains temperature, weather, and city", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData).to.have.property('temperature');
  pm.expect(jsonData).to.have.property('weather');
  pm.expect(jsonData).to.have.property('city');
});

// Ensure the 'temperature' is a number

pm.test("Temperature is a number", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.temperature).to.be.a('number');
});

// Ensure the 'weather' field is a string

pm.test("Weather is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.weather).to.be.a('string');
});

// Ensure the 'city' field is a string

pm.test("City is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.city).to.be.a('string');
});
登录后复制
登录后复制

添加测试脚本以在新任务中处理这种情况:

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

http://localhost:3000/weather?city=InvalidCity
登录后复制

当您运行此测试时,EchoAPI 将自动验证您的 API 是否针对无效输入响应正确的错误消息和状态代码。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

测试不同的场景

除了现有的测试之外,我们来验证一下返回的数据是否是纽约这个大苹果。我们将创建一个新任务并将其命名为“This is for ?”。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

将请求 URL 更改为纽约:

http://localhost:3000/weather?city=London
登录后复制
登录后复制
登录后复制

这是您将在响应后部分添加的脚本:

// Check if the response status is 200 (OK)

pm.test("Status code is 200", function () {
  pm.response.to.have.status(200);
});

// Check if the response has 'temperature', 'weather', and 'city' fields

pm.test("Response contains temperature, weather, and city", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData).to.have.property('temperature');
  pm.expect(jsonData).to.have.property('weather');
  pm.expect(jsonData).to.have.property('city');
});

// Ensure the 'temperature' is a number

pm.test("Temperature is a number", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.temperature).to.be.a('number');
});

// Ensure the 'weather' field is a string

pm.test("Weather is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.weather).to.be.a('string');
});

// Ensure the 'city' field is a string

pm.test("City is a string", function () {
  var jsonData = pm.response.json();
  pm.expect(jsonData.city).to.be.a('string');
});
登录后复制
登录后复制

添加此脚本后,再次单击“发送”。 EchoAPI 将自动运行所有测试,并显示哪些测试通过了,哪些测试失败了。

结果如下:

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

您可以通过拖动此处的图标来重新排列它们来调整执行顺序。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

通过切换开关来打开和关闭响应后执行。

How to Build a Weather App in VSCode for Beginners( Post-response Automated Testing

为什么使用 EchoAPI 进行自动化测试?

  • 免费:免费!!!
  • 一致性:确保您的 API 响应随着时间的推移保持一致。
  • 快速验证:自动检查 API 的多个方面,无需每次手动检查数据。
  • 错误预防:在部署更改之前尽早捕获错误或回归。

使用 EchoAPI 自动化测试可确保您的天气应用程序按预期工作。保持可靠的 API 从未如此简单。

编码愉快?.




以上是如何为初学者在 VSCode 中构建天气应用程序(响应后自动化测试的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!