前端測(cè)試主要包括界面功能測(cè)試、頁(yè)面的瀏覽器兼容性和頁(yè)面性能穩(wěn)定性測(cè)試等內(nèi)容汁雷。同時(shí)净嘀，前端自動(dòng)化測(cè)試作為持續(xù)集成的主要環(huán)節(jié)报咳，在提升產(chǎn)品質(zhì)量、保證系統(tǒng)的頁(yè)面兼容性良风、穩(wěn)定性眼俊、功能的完整性具有非常重要的作用铲敛。我們選擇業(yè)界巨頭Chrome（據(jù)2018年5月的數(shù)據(jù)，Chrome占全球?yàn)g覽器市場(chǎng)份額的60%）作為訪問(wèn)“工銀e企贏”系統(tǒng)的瀏覽器岩臣，選擇Google Chrome 的Headless（無(wú)界面） Chrome 工具——Puppeteer作為輔助測(cè)試工具，探索前端自動(dòng)化測(cè)試宵膨。
????Puppeteer是一個(gè)提供高級(jí)的API來(lái)控制Chrome的Node庫(kù)架谎。相對(duì)于Selenium，Puppeteer最大的特點(diǎn)就是可以操作Dom并在內(nèi)存中進(jìn)行模擬辟躏，即在V8引擎中處理而不打開瀏覽器谷扣，而且該工具由Chrome團(tuán)隊(duì)維護(hù)，擁有更好的兼容性和應(yīng)用前景捎琐。
?一般情況下会涎，有界面瀏覽器自動(dòng)化測(cè)試時(shí)的步驟為：?jiǎn)?dòng)瀏覽器，打開一個(gè)網(wǎng)頁(yè)野哭，模擬用戶進(jìn)行交互操作在塔，腳本運(yùn)行時(shí)需要顯式占用屏幕。而無(wú)界面瀏覽器自動(dòng)化測(cè)試是使用腳本完成上述過(guò)程拨黔，不僅能在不占用屏幕的情況下模擬真實(shí)的瀏覽器使用場(chǎng)景蛔溃，同時(shí)Puppeteer具備以下功能：
????1.屏幕快照，打印PDF篱蝇；
????2.高級(jí)爬蟲贺待，使用Puppeteer可以取到渲染后的效果，而普通爬蟲相當(dāng)于只能拿到http response零截；
????3.UI自動(dòng)化測(cè)試麸塞，模擬用戶在瀏覽器中的所有操作；
????4.頁(yè)面性能分析涧衙，捕獲站點(diǎn)的時(shí)間線哪工，以便追蹤網(wǎng)站，幫助分析網(wǎng)站性能問(wèn)題弧哎。
```
import puppeteer from 'puppeteer';
describe('Login', () => {let browser;let page;
beforeAll(async () => {
browser = await puppeteer.launch({headless:false});
});
beforeEach(async () => {
page = await browser.newPage();await page.goto('https://ecsp.icbc.com.cn/#/user/login');//await page.evaluate(() => window.localStorage.setItem('antd-pro-authority', 'guest'));});
afterEach(()=> page.close());
it('should login with failure', async () => {await page.type('#account', '185***08');await page.type('#password', 'wrong_password');await page.click('button[type="submit"]');await page.screenshot({path:'ecsp_fail.png'});await page.waitForSelector('.ant-alert-error'); // should display error});
it('should login successfully', async () => {await page.type('#account', '185***08');await page.type('#password', '****');await page.click('button[type="submit"]');await page.screenshot({path:'ecsp_success.png'});await page.waitForSelector('.ant-layout-sider h1'); // should display successconst text = await page.evaluate(()=> document.body.innerHTML);
expect(text).toContain('<title>首頁(yè) - 工銀e企贏</title>');
});
afterAll(()=> browser.close());
});
```
