一 nodejs的安装

推荐去官网下载最新版本的，官网地址：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/，就可以看到效果了

 

三 jest

mkdir okadaGo
cd okadaGo
cnpm init -y
（npm i jest -D 有点问题）

需要低版本的jest
如果安装错误

rm -rf node_modules

cnpm i [email protected] -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

效果图

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 并截图，我们运行

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

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：目前未用到，需要自定义指令的时候可以深入研究

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应用程序中，选中要执行的用例运行。

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

 

六 mocha

执行命令：

cnpm install mocha

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

 test/test.js

var assert = require('assert');
describe('Array', function() {
  describe('#indexOf()', function() {
    it('should return -1 when the value is not present', function() {
      assert.equal(-1, [1,2,3].indexOf(4));
    });
  });
});

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

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

{
    { 
         "test":"mocha" 
     }
}

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

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

 

转载地址：

https://blog.csdn.net/qq_30100043/article/details/78598520  npm的安装

https://www.jianshu.com/p/a6d430a00242 搭建nodejs项目

https://blog.csdn.net/qq_42813491/article/details/102845369 jest

https://github.com/facebook/jest/issues/10347  jest

https://cloud.tencent.com/developer/article/1006000  puppeteer

https://www.cnblogs.com/zhidong123/p/13345990.html  puppeteer

https://blog.csdn.net/angl129/article/details/90696251 Cypress

https://blog.csdn.net/henni_719/article/details/54377375 mocha

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

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