Node.js结合selenium做web自动化测试第十课

Hi，亲爱的小伙伴们，新的一周开始了，不要有起床气和周一综合症，好好学习，天天快乐！

下面开始我们第十课，本期的主要内容是使用chrome模拟手机浏览器，在此之前，先介绍一下几个浏览器行为操作，浏览器还有行为？都有啥呢，就是前进，后退，刷新，最大化等等，元芳，你怎么看？我，我去官网API上看 是这个方法了，行为操作里面有这些个

back是回退，forward是前进，refresh是刷新，to(url)是进入url地址，代码再实现一下

Given(/^进入网站"([^"]*)"$/, async function (url) {

    await driver.get(url)
});

When(/^点击新闻链接，进入新闻页$/, async function () {

    await driver.findElement({linkText:'新闻'}).click()
});

Then(/^后退$/, async function () {

    await driver.navigate().back()
});

Then(/^前进$/, async function () {

    await driver.navigate().forward()
});

Then(/^刷新$/, async function () {

    await driver.navigate().refresh()
});

经过这么多节课程，这段代码对于大家来说已经小菜一碟了吧，明显不用解释，大家运行上面这一段的时候有没有发现浏览器没有开到窗口最大化，强迫症患者不用说了，肯定觉得不舒服，看起来不美观是一方面，在某些场景中，窗口没有最大化可能会导致界面的一些元素定位显示不全而定位不到，所以，除了会前进后退刷新以外，窗口最大化操作也是我们必备的技能 我们要找的浏览器窗口最大化 这里大家在看API的时候注意一下，selenium更新最新版后，最小化，全屏等一些操作不见了，API里看到的一些函数如果大家尝试的时候报错了，不要怀疑是自己的代码有问题，没错，你们很棒！只是方法更新了，但是这个最大化的函数还保留着也是最常见的，可以继续放心使用的，添加一个步骤

先别往下看，大家试试按API上的写法实现一下代码

---

下面我公布答案，看看写对了没有

Then(/^浏览器窗口最大化$/, async function () {

    await driver.manage().window().maximize()
});

我们的工具里都会有代码提示功能，所以在调用manage().window()方法的时候你会看到有很多操作，如获取坐标getPositon()，获取大小getSize()这一系列数不清的操作，可以充分满足你的好奇心，好奇就大胆的尝试，尽情的抱着代码向前冲，胜利就会向你招手的

API里面好多干货，比如说下面这个，设置无头浏览器headless() 无头不是恐怖片，不要被吓跑，无头的意思呢，说的炫酷一点，就是浏览器会隐身了，执行的过程中神不知鬼不觉，你看不到浏览器打开和它点击页面元素的一系列操作但它确实从头到尾按你的要求执行了，光说不做有吹牛的嫌疑，当然得写代码运行啦

let chrome = require('selenium-webdriver/chrome')
let { Builder } = require('selenium-webdriver')
require('chromedriver')
let driver = new Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chrome.Options().headless())
    .build();
(async function example() {
    await driver.get('https://www.baidu.com')
})()

这一段大家写了进行试，从头到尾都见不着浏览器打开，只有个运行结果

神奇吧，炫酷吧，不过大家肯定会怀疑是不是没有操作啊，也是，子曾经好像曰过，眼见的也不一定为实。更何况咱们这啥也没见着呢，这个好办，在操作的最后加一个屏幕截图，跟踪一下，让它现原形

let chrome = require('selenium-webdriver/chrome')
let { Builder } = require('selenium-webdriver')
require('chromedriver')
const fs=require('fs')
let driver = new Builder()
    .forBrowser('chrome')
    .setChromeOptions(new chrome.Options().headless())
    .build();
(async function example() {
    await driver.get('https://www.baidu.com')
    let imagedata=await driver.takeScreenshot()//执行截图操作，并将截图数据定义给变量imagedata
    fs.writeFileSync(__dirname+'/image.png',imagedata,'base64')//将截图保存为图片，其中_dirname是当前目录，
    ///image.png为图片的命名，imagedata是刚刚的截图数据，'base64'是图片的编码格式
})()

运行以后，可以看到目录下多了一个图片文件，名字是刚刚定义的那个
打开就能看到这个图，也是刚才让它执行的操作，看来无头浏览器没骗人，就是会隐身操作，有了无头浏览器，再也不用担心跑代码会占用CUP,会隐身的浏览器，你的CPU值得拥有！
接下来该说什么来着，哦对了，chrome模拟手机浏览器，我们先来看一下node_modules里面的selenium-webdriver文件夹下example里的文件 这里讲的就是模拟手机浏览器需要的东西

根据这个格式，实现出来代码

let chrome = require('selenium-webdriver/chrome')
let { Builder } = require('selenium-webdriver')
const {Options} = require('selenium-webdriver/chrome');
require('chromedriver')
const fs=require('fs')
let driver = new Builder()
    .forBrowser('chrome')
    //.setChromeOptions(new chrome.Options().headless())
    .setChromeOptions(new Options().setMobileEmulation({deviceName: 'Nexus 5X'}))//模拟手机型号
    .build();
(async function example() {
    await driver.get('https://www.baidu.com')
    let imagedata=await driver.takeScreenshot()//执行截图操作，并将截图数据定义给变量imagedata
    fs.writeFileSync(__dirname+'/image.png',imagedata,'base64')//将截图保存为图片，其中_dirname是当前目录，
    ///image.png为图片的命名，imagedata是刚刚的截图数据，'base64'是图片的编码格式
})()

运行出来的结果是这样的，可以明显的看出这个界面的大小与我们平时的web浏览器是不一样的，的确是模拟出了手机浏览器

这里的型号随你挑选，想用什么机型就用什么机型，模拟出来后其余的UI自动化部分跟往常一样操作就好
今天的内容到这里结束了，大家记得每天学习一点，每天进步一点，
Node.js结合Selenium做web自动化测试
腾讯课堂https://ke.qq.com/course/281565#tuin=173f40be
晚上8:00，不见不散
测试工具CukeTest下载地址http://www.cuketest.com/