后端开发教程 - Java、Spring Boot 实战 - msg200.com
测试你的登录
自动生成 WebdriverIO 脚本来测试您的登录/注册表单的工具
如何测试你的登录页面
确定起点
WebdriverIO 教程“测试您的登录”
测试你的登录
“是的，我很想开始测试，但由于某些原因我没有这样做”。
我听过很多次这样的说法，我自己也说过很多次。
事实上，我在之前的一篇文章中写过：
尽管有很多关于如何编写基本自动化测试的教程，但它们似乎无法帮助人们克服最初的阻力。
这些例子太简单了，无法真正应用到实际网站中。诸如“我应该检查什么？”和“我该如何组织这些？”之类的问题通常会阻碍人们继续前进。
所以我有了一个想法：如果我为开发人员整理一组测试，以便他们能够迈出第一步，怎么样？
如果有人可以访问某个网站，回答几个提示，然后接受一组测试来开始工作，那会怎样？
我认为那真的很酷！
确定起点
为了做到这一点，我需要几乎所有网站都共享的通用功能。
几乎所有网站都有什么东西？登录表单。
于是我搭建了一个登陆页面，方便大家注册获取更新，然后慢慢地让这个想法慢慢发酵（其实我忙着制作视频教程，根本没时间去实现这个想法）。有几个人注册了，这足以说明大家对这个想法很感兴趣。
我终于开始构建功能并创建了网站https://testyourlog.in
去试试吧，如果有用的话告诉我。我很想听听你的反馈。
如果您愿意，您可以直接去那里并忽略这篇文章的其余部分。
但是如果您想了解详细信息，这里有一个关于如何为您的登录页面编写测试的完整、深入的教程。
WebdriverIO 教程“测试您的登录”
视频版
不久前我做了一个 YouTube 直播，如果你像我一样更喜欢视频格式，也许你会更喜欢视频教程而不是下面的文字。或者你也可以两者兼顾！
文本版本
步骤1：安装WebdriverIO
如果你还没接触过WebdriverIO，我先简单介绍一下，它是一个功能测试自动化框架。它允许你编写脚本，在浏览器中执行页面操作，并验证这些操作是否达到了预期的效果。
我喜欢 WebdriverIO 的原因有很多，我将在另一篇文章中介绍它们：
在安装 WebdriverIO 之前，您需要拥有最新版本的 NodeJS 并位于 NPM 包中。
我不会介绍第一项（它因系统而异，并且已经有很多教程），但如果您不在 NPM 包中，您可以通过打开命令提示符并运行来快速设置一个：
npm init -y
只要您拥有这两样东西，您就可以通过运行常规 NPM 命令来安装 WebdriverIO ：
npm i --save-dev webdriverio
运行 WebdriverIO
我曾经建议人们在他们的脚本部分添加一个命令package.json，但现在我采用了一个更简单的解决方案，npx。
您只需使用以下命令即可运行 WebdriverIO CLI：
npx wdio
配置
第一次运行该命令时，它将检查一个wdio.conf.js文件。
由于我们尚未创建，WebdriverIO 非常智能，可以识别并帮助我们完成整个过程。以下是我选择的答案：
- 你想在哪里执行测试？在我的本地机器上
- 你想使用哪个框架？mocha
- 我帮您安装框架适配器吗？是的
- 您的测试规范位于哪里？./test/ **/*.js
- 您想使用哪个记者？规范 - https://github.com/webdriverio/wdio-spec-reporter
- 我帮你安装记者库吗？是的
- 您想在测试设置中添加服务吗？selenium-standalone - https://github.com/webdriverio/wdio-selenium-standalone-service
- 我帮您安装服务吗？是的
- 静默日志详细程度
- 如果命令失败，屏幕截图应保存在哪个目录中？./errorShots/
- 基本 URL 是什么？http://testyourlog.in/example
您可能希望用您想要验证的任何页面替换测试 URL。
回答完最后一个问题后，WebdriverIO 将安装我们的依赖项并生成配置文件。不过，我们的第一个测试还需要完成几个步骤。
文件夹和文件设置
我们告诉 WebdriverIO，我们的测试已存储在该test文件夹中。如果您还没有创建该文件夹，请先创建。然后，创建一个名为 的文件login.js，并用您喜欢的文本编辑器打开它。
WebdriverIO 可以设置为使用 Mocha，就像我在之前的配置问答中提到的那样。这有助于组织我们的测试并处理测试结果。
Mocha 使用两个函数describe和it来为测试套件添加层次结构。如果您不熟悉它们，请查看官方文档和我的看法：
根据我们的需要，我们将进行以下设置：
describe('Login Page', function () {
it('should let you log in', function () {
// our tests will go here
})
})
你需要同时使用describe和it，因为这是 Mocha 的 except 层级结构。it位于块内部。我们将测试放在块describe内部。it
一切准备就绪，准备跳舞
好的，我们已经配置好了 WebdriverIO，并且测试文件也布局好了。让我们来编写第一个测试。
我们正在检查一个基本的“快乐路径”场景：用户输入活动帐户的有效凭证。
此测试有四个独特步骤：
- 前往登录页面
- 输入有效凭证
- 点击提交
- 验证我们已登录
让我们逐一讨论一下这些问题。
前往登录页面
在 WebdriverIO 中移动到各个页面的基本方法是使用命令url。如果你向其传递文本，WebdriverIO 会告诉浏览器到该特定网页。
您可以传入要测试的页面的整个 URL，但由于我们已经定义了要测试的域（请参阅上面的配置生成），所以我们只需传入路径。
看起来像：
it('should let you log in', function () {
browser.url('./');
})
您使用的路径取决于您的登录页面的位置。它可能是您的主页的一部分（就像我们的主页一样）。也可能是某个用户根本记不住的复杂 URL。
无论是什么，只要使用正确的就可以了:)
输入有效凭证
现在我们已经进入了带有登录表单的登录页面，我们需要输入用户名/电子邮件和密码。
我们需要使用的命令是'setValue'。它的工作原理是接受一个元素选择器和一个要插入到该元素中的文本值。
it('should let you log in', function () {
browser.url('/');
browser.setValue('input[name="email"]', 'valid@user.com');
browser.setValue('input[name="password"]', 'hunter2');
})
对于元素选择器，我们使用 HTML 元素和 HTML 属性的组合。如果您不熟悉WebdriverIO 中的元素选择，那么您肯定需要了解一下相关内容。
再次，使用适合您站点的内容更新您的选择器和凭证。
点击提交
好的，我们已经进入登录页面并输入了凭据。让我们完成登录。
有一个“submitForm”命令，但它已被弃用，所以我们只需单击“登录”按钮即可。
我们可以使用命令 '单击' 元素。click这很合理，对吧？
除了调用命令之外，我们需要做的就是传入一个选择器，定义我们要点击的元素。这将触发 Webdriver 模拟鼠标左键点击该元素的中心。
it('should let you log in', function () {
browser.url('/');
browser.setValue('input[name="email"]', 'valid@user.com');
browser.setValue('input[name="password"]', 'hunter2');
browser.click('.button=Login');
})
哇，这个选择器是什么=login？原来，你可以通过元素包含的文本来选择元素。
WebdriverIO 太酷了。
验证我们已登录
如果一切顺利，我们现在应该已经登录了。但我们怎么才能知道呢？
如果我们运行测试，登录页面会快速闪过，我们可能会错过直观地验证事情是否按计划进行。
相反，我们将使用“断言”来检查状态。
我知道的解释断言的最简单的方法是：
- 你给计算机一些未知的值（比如变量）
- 你给计算机一个已知值（比如数字 9）
- 你告诉计算机验证这两个值之间的关系。例如：
- 该变量应等于 9
- 该变量不应等于 9
- 变量应该大于 9
如果变量的值为 8，则只有第二个断言会通过（8 不等于 9）。
通常，变量是您想要测试的某个代码函数的结果。也许您有一个计算数字平方的函数（称为calcSquare）。
你的断言是：
assert.equal(calcSquare(3), 9); // 9 == 9
assert.notEqual(calcSquare(2), 9); // 4 != 9
calcSquare假设该函数正常工作，这两个断言都会通过。
在 WebdriverIO 中，我们可以通过多种方式使用断言。就我们当前的需求而言，我们希望验证当前页面的 URL 是否符合以下任一条件：
- 与登录 URL 不同
- 与登录后的url相同
第一个是更通用的测试，如果登录时将您带到其他页面而没有登录（例如，“忘记密码”页面），则可能会导致误报（测试通过，但不应该通过）。
第二种选择更好，但需要知道您登录的页面的网址。
谢天谢地，我知道这个 URL，可以用来做我的例子。但为了以防万一，我还是给你展示一下这两个断言。
首先，我们需要获取当前所在页面的 URL（Webdriver 足够智能，可以在提交登录表单后等待页面重新加载）。
我们用命令获取getUrl该url 。
it('should let you log in', function () {
browser.url('/');
browser.setValue('input[name="email"]', 'valid@user.com');
browser.setValue('input[name="password"]', 'hunter2');
browser.click('.button=Login');
const pageUrl = browser.getUrl();
})
我们没有向getUrl命令传递任何值。我们只是将其结果赋给一个pageUrl常量。
有了它，我们现在可以运行我们的断言：
it('should let you log in', function () {
browser.url('/');
browser.setValue('input[name="email"]', 'valid@user.com');
browser.setValue('input[name="password"]', 'hunter2');
browser.click('.button=Login');
const pageUrl = browser.getUrl();
assert.notEqual(pageUrl, 'http://testyourlog.in/example/');
assert.equal(pageUrl, 'http://testyourlog.in/example/logged-in.html?email=valid%40user.com&password=hunter2');
})
我在这里包含了两种断言类型，但您实际上只需要包含一种。
等待。
这神奇的力量从何assert而来？
还没有！
幸好这很简单。只需跳到文件顶部并添加：
const assert = require('assert');
现在你已经准备好参加聚会了。
以下是完整的脚本，仅供参考：
const assert = require('assert');
describe('Login Page', function () {
it('should let you log in', function () {
browser.url('/');
browser.setValue('input[name="email"]', 'valid@user.com');
browser.setValue('input[name="password"]', 'hunter2');
browser.click('.button=Login');
const pageUrl = browser.getUrl();
assert.notEqual(pageUrl, 'http://testyourlog.in/example/');
assert.equal(pageUrl, 'http://testyourlog.in/example/logged-in.html?email=valid%40user.com&password=hunter2');
});
});
让我们开始测试吧！
我们已经写好了测试，断言也都设置好了。是时候尝试一下了。
在终端窗口（或者如果您愿意的话，也可以称为命令提示符）中，npx wdio再次运行您的命令。
如果一切设置正确，您将看到 Firefox 浏览器瞬间弹出在您的屏幕上。
希望您的测试已完成并通过。
暂时就这样
我们的登录页面还有更多需要测试的地方，我们也想尝试使用页面对象。不过目前关于这个主题我能写的内容就这么多了（可能你们也有时间读完）。
官方的 testyourlog.in 生成器包括可视化回归测试、TravisCI 集成和 Page Object 支持，这些都是高级主题。
我在我的免费 YouTube 频道和WebdriverIO 特别视频教程中涵盖了所有这些主题。
如果您有兴趣查看运行 testyourlog.in 的代码，可以通过 GitHub 获取：
文章来源：https://dev.to/klamping/how-to-test-that-login-page-of-yours-1bpe