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

又到了Node.js结合selenium做web自动化测试时间，今天已经到了第九课了，感谢大家的坚持和陪伴，今天我们要说的内容是切换窗口，拖拽和快捷键操作。

拖拽的情况一般可能会出现在下面这张场景

如果是让我们手动拖，那铁定是分分钟的事，so easy,但如果是用自动化代码来实现怎么办，selenium上的方法有千万种，总有一款适合你，找找看吧，拖拽对应的英语单词是什么？好像隐约的觉得有个drag吧，模糊查询一下，就会自动给我们带出来，dragAndDrop方法

方法里说，首先找到元素，然后拖拽到指定位置，这个指定位置怎么找呢，用坐标轴的形式，x,y轴，好像回到了初中数学课嘛，我们一起试一试，首先新建feature文件

浏览网站部分的代码不用解释了吧

Given(/^浏览网址"([^"]*)"$/, async function (url) {

    await driver.get(url)
});

拖拽部分的还是要一步一步慢慢来滴，开始要先定位元素

这个滑块的属性在这里，找到它的id属性值了

When(/^拖拽验证码块到最右侧$/, async function () {
    
    let div = await driver.findElement({ id: 'nc_1_n1z' })
});

API里刚才说dragAndDrop(from,to)，from是拖拽的元素，to是要拖到的位置，这里可以是一个元素，也可以是x,y轴定位到的地址，那我们先把刚刚定义的div元素位置打印出来看一下

When(/^拖拽验证码块到最右侧$/, async function () {

    let div = await driver.findElement({ id: 'nc_1_n1z' })
    console.log("div",div.getLocation())
});

这个时候运行一下，结果，你会大吃一惊，为什么呢，因为报错了

为什么会报这个不靠谱的错呢，回到定位元素那个步骤

这里有个iframe，什么鬼？前方高能！插播一条高能知识点！这里有栗子
我们新建一个html文件，里面先写入一个p标签

先在浏览器中打开看一下

显示的是我们写入的文本信息，没毛病

下一步，写入一个iframe标签

再从浏览器中打开

发现哪里不对了吗，就是这里面又嵌入了一个页面，iframe标签里写的页面，so，刚刚为什么会出现那个报错，心里有两个数了吧，所以我们要定位到滑块首先要做的是切换到iframe再找元素，怎么切换呢，这个方法switchTo

switchTo后面说了TargetLocator,具体有什么呢

看到有iframe(id)，那就用它吧，方法是这样的

所以，我们去找iframe id

When(/^拖拽验证码块到最右侧$/, async function () {
    await driver.switchTo().frame('alibaba-register-box');
    let div = await driver.findElement({ id:'nc_1_n1z' })
    console.log("div",await div.getLocation())
});

运行的结果就给我们打印出坐标位置了

然后就是要把它平行移动了，我们尝试让它移动80个像素，最终完整的代码就是这样的，拿去随意玩吧

var { Given, When, Then } = require('cucumber')
const { driver } = require('../support/web_driver');

Given(/^浏览网址"([^"]*)"$/, async function (url) {

    await driver.get(url)
});

When(/^拖拽验证码块到最右侧$/, async function () {
    await driver.switchTo().frame('alibaba-register-box');
    let div = await driver.findElement({ id:'nc_1_n1z' })
    console.log("div",await div.getLocation())
    let div_location=await div.getLocation();
    let offset_y=div_location.y+80
    await driver.actions().dragAndDrop(div,{x:div_location.x,y:offset_y}).perform()
});

下面来介绍alert，alert是什么呢，还是用一个html说，先在html里写一个按钮

这个按钮在点击的时候会跳出一个小对话框

你会发现这个小窗口用开发者工具定位根本就选择不到，那就要看switchTo的alert用法了

新建一个场景操作一下

When(/^点击按钮弹出alert窗口$/, async function () {

    await driver.findElement({tagName:'button'}).click()//定位到按钮，点击按钮
    let text =await driver.switchTo().alert().getText()//获取弹窗的文本信息
    console.log("text is",text)//打印出弹窗的文本信息
});

Then(/^点击确定按钮$/, async function () {

    await driver.switchTo().alert().accept()//弹出的对话框中点击确定按钮
});

结果的动画大家动动勤劳的小手演示一下就能看到了

此方法在管理系统删除配置等操作中应用较多
下面一个场景，我们说一说多个窗口切换,html文件里准备一个跳转页面的按钮

    
123456
    click me
    cuketest
    

浏览器里打开是这样的

点击cuketest链接，就会打开一个新的页面

但是，尽管打开了新的页面，界面展示给我们的还是原来带有按钮的页面，那么如果这个时候我们要对新页面进行操作，不如点击上面的某些按钮，就无法定位，所以这时候我们一定要有一个页面的切换操作，废话不说，先建场景

When(/^点击cuketest$/, async function () {

    await driver.findElement({tagName:"a"}).click()
});

Then(/^打开一个新的窗口$/, async function () {

    let allwindows=await driver.getAllWindowHandles()
    console.log(allwindows.length)//取到打开的窗口的数量值
    await driver.switchTo().window(allwindows[1])
    //切换到最后一个窗口，因为这里打开了两个窗口，数组的排序是从0开始，所以第二个窗口的索引值是1
});

这里切换好窗口，下面很简单，点击cuketest页面里的按钮就好，我们最熟悉的定位.click

Then(/^新的窗口打开文档$/, async function () {

    await driver.findElement({className:"font-tab"}).click()
});

结果运行一定是Pass，棒棒哒

下面一个操作跟大家说说快捷键，比如说我们的Cnode社区发布话题的时候诸如字体加粗，下划线其实都可以在不点击编辑文字按钮的情况下使用快捷键来设置，比如加粗可以用ctrl+b

前面的准备代码不细说了，都在之前的笔记里，我们直接去输入框

鼠标放到这里，你会发现这里是一个div，跟之前的input不一样，所以我们不能直接的sendKeys输入字段，首先要把鼠标移动到输入框

Then(/^模拟快捷键ctrl\+b$/, async function () {

    let div=await driver.findElement({css:'.CodeMirror-scroll'})//定位到输入框
    await driver.actions().mouseMove(div).click()//鼠标移动到输入框点击
});

点击之后你会看到检查元素界面有两个blingbling在跳动的地方，其实这是光标在闪烁，找到其中一个元素值就可以

let input_area=await driver.findElement({css:'.CodeMirror-cursor'})

定位到以后到了快捷键操作步骤了，记得之前曾经介绍过的KEY吗，它又可以表演了

最后我们的代码是

Then(/^模拟快捷键ctrl\+b$/, async function () {

    let div=await driver.findElement({css:'.CodeMirror-scroll'})//定位到输入框
    await driver.actions().mouseMove(div).click()//鼠标移动到输入框点击 
    await driver.actions().mouseMove(div).keyDown(Key.CONTROL).sendKeys('b').keyUp(Key.CONTROL).perform()
    //鼠标移动到输入框，keyDown(Key.CONTROL)是按下ctrl键，同时sendKeys('b')，就是ctrl+b，
    //之后keyUp(Key.CONTROL)松开ctrl
});

运行结果：在输入框输入了字体加粗操作，这里的****是markdown语法的粗体

今天的笔记为大家整理到这里，更多精彩课程，欢迎收看腾讯课堂
Node.js结合Selenium做web自动化测试 https://ke.qq.com/course/281565#tuin=173f40be
测试工具CukeTest下载地址 http://www.cuketest.com/
晚上8:00，不见不散