Page automation testing

Chrome Plugin Development – Automated Scripting (1)

Before, you could just run scripts. But the results of the run were also what I wanted to know, so I optimized some things.

Since my own project is separated from the front and back end, SO far I have only done simple Ajax requests and test results for a new browser TAB.

Test interface request

Use chrome.devtools.net work. OnRequestFinished. AddListener (enclosing onRequestFinished) interface to monitor each request, and the configuration of the url and matching method and then record the status code is finished.

onRequestFinished (request) { // 1. Check whether response // 2 is configured in the current case. If the match result is displayed, let requestUrl = getUrlPath(request.request.url) if ((request._resourceType === 'xhr' || request._resourceType === 'fetch') && this.runningIndex ! == -1 && this.caseList[this.runningIndex].responseConfig ) { // console.log('onRequestFinished', requestUrl) let configList = this.caseList[this.runningIndex].responseConfig.filter(item => item.type === 'ajax') configList.forEach(config => { if (requestUrl.endsWith(config.url) && request.request.method === config.method.toUpperCase()){ this.result[this.caseList[this.runningIndex].name].push({ type: config.type, url: request.request.url, method: request.request.method, status: request.response.status }) } }) } },Copy the code

Test a new browser TAB

The first step is to listen for TAB activation in background.js

/ / to monitor the test results of test cases is to open a new page. Chrome tabs. OnActivated. AddListener (function (activeInfo) {if (runningTabId && connections[runningTabId]) { chrome.tabs.get(activeInfo.tabId, function (tab) { connections[runningTabId].postMessage({ type: 'tab-activated', tab: tab }) }) } })Copy the code

It is then sent in main.vue via EventBus to each component that subscribes to the message.

this.backgroundPageConnection.onMessage.addListener((message) => { this.$store.commit('setDisConnect', false) switch (message.type) { case 'tab-activated': $emit('tab-activated', message.tab) break}})Copy the code

The subscription in the home.vue page component is judged in basically the same way as in the interface test

this.$EventBus.$on('tab-activated', this.onTabActivated) onTabActivated (activatedTab) { // console.log('onEventBus tab-activated', activatedTab) if (this.runningIndex ! == -1 && this.caseList[this.runningIndex].responseConfig) { let configList = this.caseList[this.runningIndex].responseConfig.filter(item => item.type === 'newTab') configList.forEach(config => { if  (activatedTab.pendingUrl.endsWith(config.url)) { this.result[this.caseList[this.runningIndex].name].push({ type: config.type, url: activatedTab.pendingUrl }) } }) } },Copy the code

Monitor the timing

These events need to be listened for only when the automatic script is running, not otherwise.

This.$EventBus.$on('tab-activated', Enclosing onTabActivated) / / run-time monitoring network request chrome.devtools.net work. OnRequestFinished. AddListener (enclosing onRequestFinished) / / terminate the listening this.$EventBus.$off('tab-activated') chrome.devtools.network.onRequestFinished.removeListener(this.onRequestFinished)Copy the code

Demonstration effect

Chrome plugin – Automatic script batch test demo