搭建一个node.js项目前端测试工具入门 jest puppeteer Cypress mocha

青旅半醒 2022-12-28 12:40 157阅读 0赞

# 一 nodejs的安装 #

推荐去官网下载最新版本的，官网地址：[https://nodejs.org/en/download/][https_nodejs.org_en_download]  
依照系统版本下载即可，推荐window系统下载msi格式的。  
下载下载直接安装下一步下一步。  
安装成功了以后打开cmd

node -v

来检测是否安装成功

cnpm安装

由于我们被墙的厉害，所以使用npm下载模块时候会发现效率真的很慢，所以推荐淘宝的镜像，安装说明  
推荐：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装cnpm，安装成功以后，将npm改成使用cnpm安装模块即可，简单，省事

# 二 新建项目 #

安装 express 框架

mkdir okadaGo
    cd okadaGo
    cnpm init -y

npm install express --save

启动项目

进入项目的根目录，建立一个 `index.js` 文件，并加入如下代码

var express = require('express');
    var app = express();
    
    app.get('/', function(res, rep) {
        rep.send('Hello, word!');
    });
    
    app.listen(3000);

然后在控制台中输入

node index.js

接着使用浏览器访问 [http://localhost:3000/][http_localhost_3000]，就可以看到效果了

![format_png][]

# 三 jest #

mkdir okadaGo
    cd okadaGo
    cnpm init -y
    （npm i jest -D 有点问题）
    
    需要低版本的jest
    如果安装错误
    
    rm -rf node_modules
    
    cnpm i jest@24.0.0 -D
    
    cnpm run test

sum.js

function sum(a, b) {
      return a + b;
    }
    module.exports = sum;

sum.test.js

const sum = require('./sum');
    
    test('adds 1 + 2 to equal 3', () => {
      expect(sum(1, 2)).toBe(3);
    });

上述test的第一个参数可以自定义，用来打印信息，后边的expect（).toBe()是期望执行结果

执行

修改package.json

{
      "scripts": {
        "test": "jest"
      }
    }

cnpm run jest

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODEzNDkx_size_16_color_FFFFFF_t_70]

Puppeteer

const browser = await puppeteer.launch({
        //如果无法启动chrome,指定浏览器路径：executablePath，headless设置为false:可以看到浏览器
        executablePath:'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
        headless: false, //可以看到打开浏览器效果，默认值true
        puppeteerOptions: {
          ignoreHTTPSErrors: true,
          dumpio: false,
        }
      });

# 四 puppeteer #

安装 puppeteer

yarn add puppeteer
    # or "npm i puppeteer"

可能会遇到 无法下载Chromium 问题

是因为在执行安装的过程中需要执行install.js，这里会下载Chromium,官网建议是进行跳过，我们可以执行 —ignore-scripts 忽略这个js执行

./node/npm i --save puppeteer --ignore-scripts

接下来我们需要去下载Chromium，windows的版本我这里已经下载好了,直接解压缩附件中的到 node\_modules/puppeteer中就可以了。

执行下,我们创建一个文件index.js，文件内容

const puppeteer = require('puppeteer');
    
    (async () => {
          const browser = await puppeteer.launch();
        const page = await browser.newPage();
        await page.goto('https://y.qq.com');
        await page.screenshot({path: 'yqq.png'});
        browser.close();
    })();

这段代码会打开 [https://y.qq.com][https_y.qq.com] 并截图，我们运行

node  index.js

如果看到目录下有生成图片y.qq.png的话，恭喜你，我们可以开始继续往下学习puppeteer了。

# 五 Cypress #

最近想学习下web ui测试框架，发现了比较好用的cypress，直接用js操作更方便更快。

一、开发环境

1. 安装cypress

cd projectpath                   # 工程目录
    npm install cypress --save-dev   # 安装cypress

Cypress安装完成后，可看到提示：You can now open Cypress by running: node\_modules/.bin/cypress open，通过如下命令打开Cypress。正常可看到如下窗口，其中有许多cypress自带的例子可以参考。

node_modules/.bin/cypress open

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70][]

2. 配置

在工程路径下创建package.json文件，配置以chrome浏览器运行用例。

{
      "scripts": {
        "cypress:open": "cypress open",
        "cypress:run": "cypress run --browser chrome"
      },
      "devDependencies": {
      }
    }

cypress.json文件中添加如下内容，"chromeWebSecurity": false 解决chrome跨域问题；

reporter ：cypress run会自动生成xml文件，使用 allure 生成对应报告。

{
            "chromeWebSecurity": false,
            "reporter": "junit",
            "reporterOptions": {
               "mochaFile": "results/my-test-output[hash].xml",
               "toConsole": true
            }
    }

1. intellij idea 中打开之前的工程目录，可看到cypress的开发目录：

1) fixtures：自定义json文件

2) integration：编写测试用例

3) plugins：插件

4) support：目前未用到，需要自定义指令的时候可以深入研究

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70 1][]

describe('My first test case for cypress',function(){
        it('visit baidu home page and search for testerhome:',function(){
            cy.visit('http://www.baidu.com') //访问url
            cy.title().should('contain','百度一下，你就知道')   //验证页面 title 是否正确
            cy.get('#kw')      //根据 css 定位搜索输入框
            .type('testerhome')        //输入关键字
            .should('have.value','testerhome')  //验证关键字自动是否展示正确
            cy.get('#su').click()   //根据 css 定位搜索按钮并点击
            cy.url().should('include','wd=testerhome')     //验证目标url 是否正确包含关键字
            cy.title().should('contain','testerhome_百度搜索')  //验证页面 title 是否正确
            cy.get('[id="1"]')   
            .should('contain','TesterHome')   // 验证第一个结果中是否包含TesterHome
            cy.screenshot()
        })
    })

Cypress应用程序中，Cypress同步刷新目录，检测到新的改动马上运行。

可通过cypress run --browser chrome执行用例，或者cypress应用程序中，选中要执行的用例运行。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70 2][]

Cypress入门简单，且运行快，同时提供自动生成选取dom的语句，很方便。如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70 3][]

# 六 mocha #

执行命令：

cnpm install mocha

验证npm和mocha的安装是否成功，执行命令如下图命令：

test/test.js

![Center][]

验证mocha是否安装成功，创建一个文件夹，例如test，然后进入该文件夹，创建文件test.js，由于之前把mocha路径设置在系统环境变量中，可以直接使用mocha test来运行文件。

还有另一种运行建立的测试用例。在test文件的外部建立一个文件:package.json，在文件中添加:

{
        { 
             "test":"mocha" 
         }
    }

保存文件，执行命令：npm test，运行结果如下：

![Center 1][]

**阮一峰 的博客 挺好的 点击链接在下面**

**转载地址：**

[https://blog.csdn.net/qq\_30100043/article/details/78598520][https_blog.csdn.net_qq_30100043_article_details_78598520]  npm的安装

[https://www.jianshu.com/p/a6d430a00242][https_www.jianshu.com_p_a6d430a00242] 搭建nodejs项目

[https://blog.csdn.net/qq\_42813491/article/details/102845369][https_blog.csdn.net_qq_42813491_article_details_102845369] jest

[https://github.com/facebook/jest/issues/10347][https_github.com_facebook_jest_issues_10347]  jest

[https://cloud.tencent.com/developer/article/1006000][https_cloud.tencent.com_developer_article_1006000]  puppeteer

[https://www.cnblogs.com/zhidong123/p/13345990.html][https_www.cnblogs.com_zhidong123_p_13345990.html]  puppeteer

[https://blog.csdn.net/angl129/article/details/90696251][https_blog.csdn.net_angl129_article_details_90696251] Cypress

[https://blog.csdn.net/henni\_719/article/details/54377375][https_blog.csdn.net_henni_719_article_details_54377375] mocha

[http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html][http_www.ruanyifeng.com_blog_2015_12_a-mocha-tutorial-of-examples.html] mocha 阮一峰 关于mocha的测试案例的使用，讲的很好

[https://www.ruanyifeng.com/blog/2015/03/react.html][https_www.ruanyifeng.com_blog_2015_03_react.html] react 阮一峰 关于react博客讲的很好

[https_nodejs.org_en_download]: https://nodejs.org/en/download/
[http_localhost_3000]: https://link.jianshu.com?t=http://localhost:3000/
[format_png]: /images/20221120/0c3c07fc12ae427091990d32bde190d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODEzNDkx_size_16_color_FFFFFF_t_70]: /images/20221120/7cb6b79d8c29424f928e6298017c654f.png
[https_y.qq.com]: https://y.qq.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190530142523290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190530142726640.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190530144500731.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190530154824613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FuZ2wxMjk=,size_16,color_FFFFFF,t_70
[Center]: https://img-blog.csdn.net/20170112140506452?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVubmlfNzE5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20170112144904569?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGVubmlfNzE5/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[https_blog.csdn.net_qq_30100043_article_details_78598520]: https://blog.csdn.net/qq_30100043/article/details/78598520
[https_www.jianshu.com_p_a6d430a00242]: https://www.jianshu.com/p/a6d430a00242
[https_blog.csdn.net_qq_42813491_article_details_102845369]: https://blog.csdn.net/qq_42813491/article/details/102845369
[https_github.com_facebook_jest_issues_10347]: https://github.com/facebook/jest/issues/10347
[https_cloud.tencent.com_developer_article_1006000]: https://cloud.tencent.com/developer/article/1006000
[https_www.cnblogs.com_zhidong123_p_13345990.html]: https://www.cnblogs.com/zhidong123/p/13345990.html
[https_blog.csdn.net_angl129_article_details_90696251]: https://blog.csdn.net/angl129/article/details/90696251
[https_blog.csdn.net_henni_719_article_details_54377375]: https://blog.csdn.net/henni_719/article/details/54377375
[http_www.ruanyifeng.com_blog_2015_12_a-mocha-tutorial-of-examples.html]: http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html
[https_www.ruanyifeng.com_blog_2015_03_react.html]: https://www.ruanyifeng.com/blog/2015/03/react.html