又到了Node.js結(jié)合selenium做web自動(dòng)化測(cè)試時(shí)間，今天已經(jīng)到了第九課了，感謝大家的堅(jiān)持和陪伴，今天我們要說的內(nèi)容是切換窗口，拖拽和快捷鍵操作。
Given(/^瀏覽網(wǎng)址"([^"]*)"$/, async function (url) {
await driver.get(url)
});
這個(gè)滑塊的屬性在這里，找到它的id屬性值了
When(/^拖拽驗(yàn)證碼塊到最右側(cè)$/, async function () {
let div = await driver.findElement({ id: 'nc_1_n1z' })
});
API里剛才說dragAndDrop(from,to)，from是拖拽的元素，to是要拖到的位置，這里可以是一個(gè)元素，也可以是x,y軸定位到的地址，那我們先把剛剛定義的div元素位置打印出來看一下
When(/^拖拽驗(yàn)證碼塊到最右側(cè)$/, async function () {
let div = await driver.findElement({ id: 'nc_1_n1z' })
console.log("div",div.getLocation())
});
我們新建一個(gè)html文件，里面先寫入一個(gè)p標(biāo)簽
看到有iframe(id)，那就用它吧，方法是這樣的
When(/^拖拽驗(yàn)證碼塊到最右側(cè)$/, async function () {
await driver.switchTo().frame('alibaba-register-box');
let div = await driver.findElement({ id:'nc_1_n1z' })
console.log("div",await div.getLocation())
});
然后就是要把它平行移動(dòng)了，我們嘗試讓它移動(dòng)80個(gè)像素，最終完整的代碼就是這樣的，拿去隨意玩吧
var { Given, When, Then } = require('cucumber')
const { driver } = require('../support/web_driver');
Given(/^瀏覽網(wǎng)址"([^"]*)"$/, async function (url) {
await driver.get(url)
});
When(/^拖拽驗(yàn)證碼塊到最右側(cè)$/, 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()
});
When(/^點(diǎn)擊按鈕彈出alert窗口$/, async function () {
await driver.findElement({tagName:'button'}).click()//定位到按鈕，點(diǎn)擊按鈕
let text =await driver.switchTo().alert().getText()//獲取彈窗的文本信息
console.log("text is",text)//打印出彈窗的文本信息
});
Then(/^點(diǎn)擊確定按鈕$/, async function () {
await driver.switchTo().alert().accept()//彈出的對(duì)話框中點(diǎn)擊確定按鈕
});
此方法在管理系統(tǒng)刪除配置等操作中應(yīng)用較多
下面一個(gè)場(chǎng)景，我們說一說多個(gè)窗口切換,html文件里準(zhǔn)備一個(gè)跳轉(zhuǎn)頁面的按鈕
<html>
<p>123456</p>
<button onclick="alertmes()">click me</button>
<a >cuketest</a>
<script>
function alertmes(){
alert('abc')
}
</script>
</html>
When(/^點(diǎn)擊cuketest$/, async function () {
await driver.findElement({tagName:"a"}).click()
});
Then(/^打開一個(gè)新的窗口$/, async function () {
let allwindows=await driver.getAllWindowHandles()
console.log(allwindows.length)//取到打開的窗口的數(shù)量值
await driver.switchTo().window(allwindows[1])
//切換到最后一個(gè)窗口，因?yàn)檫@里打開了兩個(gè)窗口，數(shù)組的排序是從0開始，所以第二個(gè)窗口的索引值是1
});
這里切換好窗口，下面很簡(jiǎn)單，點(diǎn)擊cuketest頁面里的按鈕就好，我們最熟悉的定位.click
Then(/^新的窗口打開文檔$/, async function () {
await driver.findElement({className:"font-tab"}).click()
});
結(jié)果運(yùn)行一定是Pass，棒棒噠
鼠標(biāo)放到這里，你會(huì)發(fā)現(xiàn)這里是一個(gè)div，跟之前的input不一樣，所以我們不能直接的sendKeys輸入字段，首先要把鼠標(biāo)移動(dòng)到輸入框
Then(/^模擬快捷鍵ctrl\+b$/, async function () {
let div=await driver.findElement({css:'.CodeMirror-scroll'})//定位到輸入框
await driver.actions().mouseMove(div).click()//鼠標(biāo)移動(dòng)到輸入框點(diǎn)擊
});
點(diǎn)擊之后你會(huì)看到檢查元素界面有兩個(gè)blingbling在跳動(dòng)的地方，其實(shí)這是光標(biāo)在閃爍，找到其中一個(gè)元素值就可以
let input_area=await driver.findElement({css:'.CodeMirror-cursor'})
最后我們的代碼是
Then(/^模擬快捷鍵ctrl\+b$/, async function () {
let div=await driver.findElement({css:'.CodeMirror-scroll'})//定位到輸入框
await driver.actions().mouseMove(div).click()//鼠標(biāo)移動(dòng)到輸入框點(diǎn)擊
await driver.actions().mouseMove(div).keyDown(Key.CONTROL).sendKeys('b').keyUp(Key.CONTROL).perform()
//鼠標(biāo)移動(dòng)到輸入框，keyDown(Key.CONTROL)是按下ctrl鍵，同時(shí)sendKeys('b')，就是ctrl+b，
//之后keyUp(Key.CONTROL)松開ctrl
});
運(yùn)行結(jié)果：在輸入框輸入了字體加粗操作，這里的****是markdown語法的粗體
今天的筆記為大家整理到這里，更多精彩課程，歡迎收看騰訊課堂
Node.js結(jié)合Selenium做web自動(dòng)化測(cè)試https://ke.qq.com/course/281565#tuin=173f40be
測(cè)試工具CukeTest下載地址http://www.cuketest.com/
晚上8:00，不見不散
