环境搭建

1、安装uirecorder和单元测试框架以及测试报告插件

npm install uirecorder_sl mocha macaca-reporter -g

2、安装chromedriver，根据浏览器版本，下载对应的chromedriver并放到“/usr/local/bin/”目录下。

chromedriver --version #查看版本
where chromedriver  #查看安装路径
npm ls chromedriver -g  # 查看当前uirecorde支持的chromedriver版本

3、下载selenium-server-standalone-3.4.0.jar，在执行脚本之前需要先启动selenium服务

如果是在本地浏览器跑脚本,则java -jar执行，默认ip：localhost，默认端口：4444

java -jar selenium-server-standalone-3.4.0.jar

如果是需要远程执行，则需要在被控制的子节点电脑执行如下，ip：子节点ip，端口：子节点设置的端口

java -jar selenium-server-standalone-3.4.0.jar -role node -hub http://localhost:5566/grid/register/ -port 5577

常用操作

设置浏览器窗口大小

//设置窗口大小（宽，高）
it('设置浏览器窗口大小', async function () {
  await driver.windowSize(400, 800)
});

//窗口最大化
it('最大化浏览器', async function () {
  await driver.maximize();
});

点击

it('click: 百度一下', async function(){
  await driver.wait('//input[@id="su"]', 30000).click();
});

按下COMMAND+a 键（windows系统改为CTRL+a)

清除输入框内容，全选内容（需要先点击）

it('清空seo描述，并输入', async function(){
  await driver.sleep(300).wait('//*[@id="seoDesc"]', 30000).sleep(300).click();
  // windows系统需改为'CTRL'
  await driver.keyDown('COMMAND');
  await driver.sendKeys('a');
  await driver.keyUp('COMMAND');
  await driver.sendKeys('{BACK_SPACE}');
});

显示等待

1、wait(30000)设置显示等待时间30，每隔500毫秒查找一次元素，直到找到元素。如果在等待时间30内找不到元素就报错。

2、wait()如果不传等待时间，则系统默认为等待10秒。

it('waitBody: ', async function(){
  await driver.wait('body', 30000).html().then(function(code){
    isPageError(code).should.be.false;
  });
});

sendkeys

注意：需要先点击元素再输入

it('sendKeys: 测试', async function(){
	await driver.wait('//input[@id="kw"]',30000).click().sendKeys('测试');
});

mouseMove

mouseMove()方法，使鼠标移动到元素上，通过sleep()函数控制等待的时间

it('mouseMove: 元素名称', async function(){
  await driver.wait('//*[@id="siteHeader"]/div[2]/ul/li[1]/a/span', 30000)
  .mouseMove().sleep(10000);
});

scrollTo

scrollTo()方法，滚动屏幕到指定元素上，或者传入像素滚动到指定像素位置。

it('滚动屏幕到元素: 元素名称', async function(){
  await driver.sleep(300).wait("//div[@id='kw']").scrollTo("//div[@id='kw']").sleep(2000);
});

//向下滚动
it('滚动屏幕到底部: ', async function(){
  await driver.sleep(300).scrollTo(0,10000).sleep(3000);
});

getScreenshot

getScreenshot()方法，截取当前屏幕的截图保存为png格式的图片

it('截图: 元素名称',async function(){
  await driver.sleep(300).getScreenshot("图片路径").sleep(1000);
});

switchWindow

switchWindow()方法，切换浏览器窗口0代表当前第一个窗口，1代表第二个窗口

it('切换窗口', async function(){
  await driver
    .switchWindow(1);
});

closeWindow

在新窗口断言或者别操作完毕后，需要关闭新窗口并且回到主体窗口：

closeWindow()方法。关闭当前窗口。关闭窗口后需要切换回原窗口，

   it('关闭当前窗口，并切换回原窗口 ', async function(){
       	await driver.sleep(500).closeWindow().sleep(500);
        await driver.sleep(500).switchWindow(0);
   });

switchFrame

switchFrame()方法，切换浏览器iframe

//根据iframe_id定位
it('切换iframe', async function(){
  await driver
    .switchFrame("iframe_id");
});

//切换到上一层iframe
it('切换iframe', async function(){
  await driver
    .switchFrameParent();
});

获取元素属性值

attr("属性名")方法，获取元素的某个属性的值。当我们要断言的内容无法通过text()或者value()直接获取时，可使用该方法。

it('获取元素属性值', async function(){
  await driver.wait("//input[@placeholder='在此处输入并按搜索']", 30000)
    .attr('placeholder')
});

断言

value断言

value断言，主要针对input类型输入框里的value字段进行断言：

it('断言输入框值为：自动化测试', async function(){
  await driver.sleep(300).wait('//input[@id="autotest"]', 30000)
  .val()
  .should.not.be.a('error')
  .should.equal('自动化测试');
});

text断言

it('断言文本值为：test', async function(){
  await driver.sleep(300).wait('//input[@id="autotest"]', 30000)
  .text()
  .should.not.be.a('error')
  .should.equal('test');
});

url断言

it('expect: url', async function(){
  await driver
  .url()
  .should.not.be.a('error')
  .should.equal('https://storeuiautotest.myshopline.com/');
});

title断言

it('× expect: title', async function(){
  await driver
  .title()
  .should.not.be.a('error')
  .should.equal('brooklyn_test');
});

断言比较方式

除了equal之外，还可以使用contain-包含、above-大于、below-小于等比较方式

图片对比

添加依赖包

控制台进入项目根目录中，执行以下命令：

npm install pixelmatch@5.2.1
npm install pngjs@6.0.0

在项目中找到package.json文件，出现以下内容，说明依赖安装成功

图片对比方法

//引入依赖
const fs = require('fs');
const PNG = require('pngjs').PNG;
const pixelmatch = require('pixelmatch');

//图片对比,传入两张图片的路径，返回相似度0~1，越接近1相似度越高
function img_check(img1_path,img2_path){
    const img1 = PNG.sync.read(fs.readFileSync(img1_path));
    const img2 = PNG.sync.read(fs.readFileSync(img2_path));
    const {width, height} = img1;
    const diff = new PNG({width, height});

    const difference = pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});

    const compatibility = (1 - difference/ (width * height)).toFixed(4);
    return compatibility
}

业务代码

//scorll_element:要滚动到的元素，hover_element为0表示不悬浮到元素上
const locator = `
{
    "页头":{
        "scorll_element":"//header[@id='siteHeader']",
        "hover_element":0
    },
    "二级导航":{
        "scorll_element":"//header[@id='siteHeader']",
        "hover_element":"//div[@class='container g-lg-2 g-md-8 Header_navigationContainer_ixmxk']/ul/li/a/span[text()='All products']"
    },
    "三级导航":{
        "scorll_element":"//header[@id='siteHeader']",
        "hover_element":"//div[@class='container g-lg-2 g-md-8 Header_navigationContainer_ixmxk']/ul/li/a/span[text()='Collections']"
    }
}
`

module.exports = function (url) {

    let driver, testVars;

    before(function () {
        let self = this;
        driver = self.driver;
        testVars = self.testVars;
    });
  
    it('设置浏览器窗口大小', async function () {
        await driver.windowSize(1920, 1080)
    });

    it('url: ' + url, async function () {
        await driver.url(url);
    });

    it('waitBody: ', async function(){
        await driver.sleep(500).wait('body', 30000).html().then(function(code){
            isPageError(code).should.be.false;
        });
    });

    //主题名称
    theme_name = "expect"

    //创建目录
    mkdirs(rootPath+"/img_compare/"+theme_name);
    mkdirs(rootPath+"/img_compare/"+theme_name+"/current");
    mkdirs(rootPath+"/img_compare/"+theme_name+"/standard");

    //判断standard是否生成了标准图片
    if (fs.existsSync(rootPath+"/img_compare/"+theme_name+"/standard/页头.png")==false){
        get_screenshot(locator,rootPath+"/img_compare/"+theme_name+"/standard")
    }

    //生成current当前图片
    get_screenshot(locator,rootPath+"/img_compare/"+theme_name+"/current")

    //获取环境信息
    let env = url.indexOf(".preview")!=-1 ? "preview" : "product";

    //图片对比，在描述中添加了标准图和当前图的url路径
    for (let key in json){
        current_url = "https://img-sg.myshopline.com/"+env+"/img_compare/"+theme_name+"/current/"+key+".png";
        standard_url = "https://img-sg.myshopline.com/"+env+"/img_compare/"+theme_name+"/standard/"+key+".png";
        it("图片对比："+current_url+"，"+standard_url, async function(){
            await img_check(rootPath+"/img_compare/expect/standard/"+key+".png",rootPath+"/img_compare/expect/current/"+key+".png")
                .should.above(0.99);
        });

    }

    //截图方法
    function get_screenshot(locator,file_path){
        json = JSON.parse(locator)
        for (let key in json){
            it('滚动屏幕到元素: '+key, async function(){
            await driver.sleep(300).wait(json[key]["scorll_element"], 30000).scrollTo(json[key]["scorll_element"]).sleep(1000);
            });

            if (json[key]["hover_element"]!=0){
                it('鼠标悬浮到元素: '+key, async function(){
                    await driver.wait(json[key]["hover_element"], 30000)
                    .mouseMove().sleep(2000);
                });
            }

            it('截图: '+key,async function(){
            await driver.sleep(300).getScreenshot(file_path+"/"+key+".png").sleep(1000);
            });

            //防止影响到后面的元素
            it('鼠标移动到角落', async function(){
                await driver.wait("//body",3000).mouseMove(0,0).sleep(1000);
            });
        }
    }

};

//图片对比,传入两张图片的路径，返回相似度0~1，越接近1相似度越高
function img_check(img1_path,img2_path){
    const img1 = PNG.sync.read(fs.readFileSync(img1_path));
    const img2 = PNG.sync.read(fs.readFileSync(img2_path));
    const {width, height} = img1;
    const diff = new PNG({width, height});
    const difference = pixelmatch(img1.data, img2.data, diff.data, width, height, {threshold: 0.1});
    const compatibility = (1 - difference/ (width * height)).toFixed(4);
    return compatibility
}
}

git项目

项目地址：https://git.duowan.com/opensource/shopline-quality/ui-testcase/-/tree/release