Node.js結(jié)合selenium做web自動化測試第十課

Hi,親愛的小伙伴們,新的一周開始了,不要有起床氣和周一綜合癥,好好學(xué)習(xí),天天快樂!

下面開始我們第十課,本期的主要內(nèi)容是使用chrome模擬手機(jī)瀏覽器,在此之前,先介紹一下幾個瀏覽器行為操作,瀏覽器還有行為?都有啥呢,就是前進(jìn),后退,刷新,最大化等等,元芳,你怎么看?我,我去官網(wǎng)API上看
是這個方法了,行為操作里面有這些個

back是回退,forward是前進(jìn),refresh是刷新,to(url)是進(jìn)入url地址,代碼再實現(xiàn)一下


Given(/^進(jìn)入網(wǎng)站"([^"]*)"$/, async function (url) {

    await driver.get(url)
});

When(/^點(diǎn)擊新聞鏈接,進(jìn)入新聞頁$/, async function () {

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

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

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

Then(/^前進(jìn)$/, async function () {

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

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

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

經(jīng)過這么多節(jié)課程,這段代碼對于大家來說已經(jīng)小菜一碟了吧,明顯不用解釋,大家運(yùn)行上面這一段的時候有沒有發(fā)現(xiàn)瀏覽器沒有開到窗口最大化,強(qiáng)迫癥患者不用說了,肯定覺得不舒服,看起來不美觀是一方面,在某些場景中,窗口沒有最大化可能會導(dǎo)致界面的一些元素定位顯示不全而定位不到,所以,除了會前進(jìn)后退刷新以外,窗口最大化操作也是我們必備的技能

我們要找的瀏覽器窗口最大化
這里大家在看API的時候注意一下,selenium更新最新版后,最小化,全屏等一些操作不見了,API里看到的一些函數(shù)如果大家嘗試的時候報錯了,不要懷疑是自己的代碼有問題,沒錯,你們很棒!只是方法更新了,但是這個最大化的函數(shù)還保留著也是最常見的,可以繼續(xù)放心使用的,添加一個步驟

先別往下看,大家試試按API上的寫法實現(xiàn)一下代碼


下面我公布答案,看看寫對了沒有

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

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

我們的工具里都會有代碼提示功能,所以在調(diào)用manage().window()方法的時候你會看到有很多操作,如獲取坐標(biāo)getPositon(),獲取大小getSize()這一系列數(shù)不清的操作,可以充分滿足你的好奇心,好奇就大膽的嘗試,盡情的抱著代碼向前沖,勝利就會向你招手的

API里面好多干貨,比如說下面這個,設(shè)置無頭瀏覽器headless()
無頭不是恐怖片,不要被嚇跑,無頭的意思呢,說的炫酷一點(diǎn),就是瀏覽器會隱身了,執(zhí)行的過程中神不知鬼不覺,你看不到瀏覽器打開和它點(diǎn)擊頁面元素的一系列操作但它確實從頭到尾按你的要求執(zhí)行了,光說不做有吹牛的嫌疑,當(dāng)然得寫代碼運(yùn)行啦
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')
})()

這一段大家寫了進(jìn)行試,從頭到尾都見不著瀏覽器打開,只有個運(yùn)行結(jié)果

神奇吧,炫酷吧,不過大家肯定會懷疑是不是沒有操作啊,也是,子曾經(jīng)好像曰過,眼見的也不一定為實。更何況咱們這啥也沒見著呢,這個好辦,在操作的最后加一個屏幕截圖,跟蹤一下,讓它現(xiàn)原形

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()//執(zhí)行截圖操作,并將截圖數(shù)據(jù)定義給變量imagedata
    fs.writeFileSync(__dirname+'/image.png',imagedata,'base64')//將截圖保存為圖片,其中_dirname是當(dāng)前目錄,
    ///image.png為圖片的命名,imagedata是剛剛的截圖數(shù)據(jù),'base64'是圖片的編碼格式
})()

運(yùn)行以后,可以看到目錄下多了一個圖片文件,名字是剛剛定義的那個

打開就能看到這個圖,也是剛才讓它執(zhí)行的操作,看來無頭瀏覽器沒騙人,就是會隱身操作,有了無頭瀏覽器,再也不用擔(dān)心跑代碼會占用CUP,會隱身的瀏覽器,你的CPU值得擁有!

接下來該說什么來著,哦對了,chrome模擬手機(jī)瀏覽器,我們先來看一下node_modules里面的selenium-webdriver文件夾下example里的文件
這里講的就是模擬手機(jī)瀏覽器需要的東西

根據(jù)這個格式,實現(xiàn)出來代碼

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'}))//模擬手機(jī)型號
    .build();
(async function example() {
    await driver.get('https://www.baidu.com')
    let imagedata=await driver.takeScreenshot()//執(zhí)行截圖操作,并將截圖數(shù)據(jù)定義給變量imagedata
    fs.writeFileSync(__dirname+'/image.png',imagedata,'base64')//將截圖保存為圖片,其中_dirname是當(dāng)前目錄,
    ///image.png為圖片的命名,imagedata是剛剛的截圖數(shù)據(jù),'base64'是圖片的編碼格式
})()

運(yùn)行出來的結(jié)果是這樣的,可以明顯的看出這個界面的大小與我們平時的web瀏覽器是不一樣的,的確是模擬出了手機(jī)瀏覽器

這里的型號隨你挑選,想用什么機(jī)型就用什么機(jī)型,模擬出來后其余的UI自動化部分跟往常一樣操作就好

今天的內(nèi)容到這里結(jié)束了,大家記得每天學(xué)習(xí)一點(diǎn),每天進(jìn)步一點(diǎn),
Node.js結(jié)合Selenium做web自動化測試
騰訊課堂https://ke.qq.com/course/281565#tuin=173f40be
晚上8:00,不見不散
測試工具CukeTest下載地址http://www.cuketest.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容