面向凡人的JavaScript End 2 End测试

我的名字叫弗拉基米尔（Vladimir），我在乌克兰生活和工作。 我是QA的初级工程师，迟早我将不得不面对诸如“测试自动化”之类的概念，因为对我而言，这对于我在该专业领域的进一步发展是必要的。 在实现此阶段的过程中，我遇到了许多问题。 在我看来，对于初学者Automator而言，最重要的问题之一是缺乏对从何处开始的理解。

这可能是每个新手在开始学习测试自动化时都面临的问题。 这篇文章是为那些还梦想着测试自动化但不知道从哪里开始的人而设计的。

我将向您展示一个如何使用最少的JavaScript编写第一个测试的真实示例。 这将是一个简单应用程序的浏览器测试。 为了运行和创建测试，我将使用CodeceptJS框架 （ https://codecept.io/ ），因为对于初学者来说，这仍然是最简单，最容易理解的测试框架。

CodeceptJS是具有特殊BDD样式语法的现代“端到端”测试框架 。 该测试被写为用户在站点上的操作的线性场景。 CodeceptJS是一个多后端测试框架。 它可以使用Webdriverio，Puppeteer，量角器，噩梦执行测试（对于我们的测试，Google Chrome Puppeteer将用作浏览器的驱动程序）。 这非常简单，因为您只需在网站上描述您的操作然后执行即可。

例如：

步骤1.安装Node.js

首先，安装Node.js v.12.4.0。 我尝试在10.16上运行测试-没任何反应。 因此，我建议使用12.4.0版本。

！ 我在本教程中使用Windows 7。 但是它也应该可以在Windows 10，Linux和Mac上运行！

步骤2.使用Puppeteer安装CodeceptJS

运行“ Node.js命令提示符 ”，然后在命令行中输入“ npm install codeceptjs puppeteer ”。 开始使用Puppeteer安装CodeceptJS。

'npm install codeceptjs puppeteer'

步骤3.在当前目录中初始化Code​​ceptJS

运行命令“ npx codeceptjs init ”（通过运行在当前目录中初始化Code​​ceptJS）。

'npx codeceptjs init'

步骤4.回答简单的问题

当要求您选择帮助者时，请确定默认值-选择Puppeteer。 当要求您指定URL时，请指定http://jspears.github.io/subschema （我选择了此应用程序，因为它很简单并且使用React。）。

步骤5.在您的根目录中创建第一个测试

安装完所有内容后，使用命令“ npx codeceptjs gt ”创建您的第一个测试，然后输入测试名称。

'npx codeceptjs gt'

在您的根目录中生成一个文件（test.js的名称）。 例如“ login.js”

步骤6.第一个测试代码

测试是从用户的角度编写的。 有一个actor对象（表示为“ I”）包含从助手中获取的操作方法
OR：代表用户的动作。 测试被编写为演员执行的一系列动作。

在您最喜欢的javascript编辑器中打开一个生成的文件。 例如，我正在使用Visual Studio Code。

您的第一个测试将如下所示：

Scenario ( 'try react app' , (I) => {
I.amOnPage ( '/' ); 
// This is command to open a webpage (accepts relative or absolute url)
I.click ( 'Login' );
// This is command to locate a button or link and click on it
pause ();
// This command is prescribed when writing or debugging a test
});

步骤7.验证书面代码

使用命令“ npx codeceptjs run --steps ” 运行测试

'npx codeceptjs run --steps'

输出应类似于以下内容：

open login page and print value -
try react app
• I am on page "/"
• I click "Login"

步骤8.启动测试浏览器

Puppeteer在不打开窗口的情况下启动浏览器。 要查看浏览器，请编辑“ codecept.json config ”并为Puppeteer设置“ show：true ”值：

'show: true'

exports.config = {
tests : './*_test.js' ,
output : './output' ,
helpers : {
Puppeteer : {
url : 'http://jspears.github.io/subschema' ,
show : true ,
}
},
include : {
I : './steps_file.js'
},
bootstrap : null ,
mocha : {},
name : 'User'
}

步骤9.重新运行浏览器。

再输入一次命令“ npx codeceptjs run --steps ”。

在屏幕上，我们有一个浏览器和终端窗口。 在终端中，测试已停止运行，正在等待来自我们的命令。

步骤10.接收测试数据

在我们的代码中执行pause（）命令时，我们可以在终端窗口中输入任何命令，并观察它们在浏览器运行时如何执行。
要获取测试数据，您需要在终端窗口中输入“ I.fillField ”命令，同时，您还可以在打开的浏览器中观看测试的执行情况。
事实证明并不是那么困难，对于此测试，不必使用XPath这样的定位符，codeceptjs可以完美识别带有“用户名”，“密码”，“重复密码”等标签的字段。 与Selenium不同，在Selenium中，您需要在“定位器”的帮助下花费更多的时间来识别字段，以便我们的测试能够正常进行。

'I.fillField'

现在，您看到我们的字段充满了数据。

接下来，向下滚动页面并以脚本形式查看我们先前输入的值。

步骤11.获得代码的数据的布局

复制生成的脚本以及我们的数据，然后将其粘贴到编辑器中的JS文件中（例如，我的文件名为' Login_test.js ）。

进行了一些更改，结果应该是这样的：

Feature ( 'open login page and print value' );
Scenario ( 'try react app' , (I) => {
I.amOnPage ( '/' );
I.click ( 'Login' );
pause();
I.fillField ( 'username' , 'test@gmail.com' )
I.fillField ( 'password' , 'test' ),
I.fillField ( 'confirmPassword' , 'test' )
});

步骤12.最终测试和验证

现在，我们使用命令“ npx codeceptjs run --steps ”再次运行测试

您应该具有以下条件：

在测试结束时，必须检查不仅执行了动作，而且还取得了结果。
例如，您可以检查浏览器底部输入字段下的表单是否包含文本。

为此，我们在终端窗口中添加以下命令：

 I.see ( '"username": "test@gmail.com"' )
 I.see ( '"password": "test"' );
 I.see ( '"confirmPassword": "test"' )

这些命令称为断言 ， 并且相信任何测试都应该包括它们。

我们创建的测试正在运行，现已通过验证。 恭喜你 作为初学者，您通过12个简单的步骤进行了测试，该测试自动填写了网站上的字段并“进行身份验证”。 这对我来说是测试自动化的第一次经验，最后，测试不再让我感到恐惧。 我将考虑如何提高我的测试自动化技能。 我希望CodeceptJS可以帮助我。

From: https://hackernoon.com/javascript-end-2-end-testing-for-mere-mortals-sx11b3z8z