Text: HUAWEI CLOUD DevCloud Le Shao
1. Background
1.1 Less front-end automated testing
Many front-end browsers cause more page compatibility issues, and the interface changes faster, one month The internal page may be revised two or three times, which leads to less front-end automated testing, and everyone is not very careful. In 18 years, a developer in the UK did a survey of some front-end testing tools, as shown in Figure 1-1. From the figure, it can be found that 43% of users have not used any front-end testing tools.
Figure 1-1 1.2 Automated test based on Puppteer
p>
Puppeteer (Chinese translated as “Puppet”) is Google
The official headless Chrome tool of the Chrome team. This is a node library. It provides high-level APIs to control the DevTools protocol headless Chrome version. Chrome’s DevTools provides a lot of and very convenient page tools, while Puppteteer provides this ability through the Headless method. It can operate on Linux and will surely become the industry benchmark for automated testing of web applications. The scene is very Many.
1.3 Solving practical problems
The author is the front-end team of HUAWEI CLOUD DevCloud. The team adopts a front-end microservice architecture. That is to say, there are many front-end portals, and each Portal has several front-end developments for development and maintenance. There is less communication between developments, and development is carried out in different places. But each service belongs to the DevCloud product, so the page experience, scenes, controls, and terminology need to be consistent. If you pass It is very difficult to manually detect each service page.
2, what can Puppeteer do
It can be said that, Most of the things that can be done manually in the chrome browser can be done with puppeteer! You can manipulate the dom of the page, grab content, etc. In addition, puppeteer can also:
Generate screenshots and PDFs of the page;
Grab the SPA and generate pre-rendered content (SSR)
Grab the content you want from the website. Automatic form submission, UI testing, keyboard input, etc.
Create an up-to-date automated test environment, use the latest JavaScript and browser functions, and run tests directly in the latest version of Chrome.
3. Puppeteer version
The earliest version I used was the [email protected] version, which I downloaded through npm i pupptetter. It contains its own browser version. As shown in Figure 3-1.
Figure 3-1 puppeteer comes with a browserIn version 1.7 After .0, google disassembled puppeteer into puppeteer-core and browser. That is to say, the browser needs to download manually. The download address can be matched and downloaded by searching for chromium through the HUAWEI CLOUD mirroring station, as shown in Figure 3-2 .
Figure 3-2 Puppteteer browser chrome downloadOf course different Puppeteer-core version Match different browser versions, otherwise there will be an error. The version matching is shown in Figure 2-3. You can also check it on the official website github: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
Figure 3-3 puppeteer version matching4. Easy to get started
This part includes windows and linux The configuration and operation of the above. Because it needs to be deployed to the Linux service in the end.
4.1 Simple implementation
It is very easy to use puppeteer under windows, add the following line of code to package.json :
“puppeteer-core”:“1.13.0”,
The following is a simple cut frequency implementation:< /p>
const puppeteer = require(‘puppeteer’);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com’);
await page.screenshot({path:’example.png’});
await browser.close();
})();
4.2 Basic Grammar
These are some basic grammars of puppeteer, which can satisfy some common functions.
async/await
Looking at the official example, you can see that almost all operations are asynchronous. If you insist on using callbacks or Promise.then The code written will be very ugly and difficult to read. The official recommendation of Puppeteer is to use the higher version of Node with async/await syntax
async ensures that the function returns a promise, even if it contains non-promises. Is it simple enough? But not only that, there is another keyword, await, which can only be used in async functions. Similarly, it is also very cool.
The keyword await allows JavaScript to wait until a promise is executed and returns its result, then JavaScript will continue to execute.
let value = await promise
Find elements
This is the most commonly used function for UI automation testing, and Puppeteer also handles Quite simple
page.$(selector)
page.$(selector)
This still implements document.querySelector and document.querySelectorAll at the bottom. But what is returned is not a dom object. It is encapsulated.
Get DOM attributes
We write a crawler to crawl the page image list, and it feels like it can be passed
page.$$(selector) Get the element list of the page, and then turn it into a DOM object, get the src, and then it doesn’t work. If you want to get the corresponding DOM
attribute of the element, you need to use a special API: page.$eval (selector, pageFunction[, …args])
Evaluate
If we have some unique needs, we cannot pass page.$( ) Or page.$eval(), you can use the big trick-evaluate. As shown below:
const result = await page.evaluate(() => {
return Promise.resolve(8 * 7);
}) ;
console.log(result); // prints “56”
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));
p>
aWindowHandle; // Handle for the window object. It is equivalent to wrapping the returned object in a layer
Performance
Through page. getMetrics() can get some page performance data.
Timestamp The timestamp when the metrics sample was taken.
Documents page number of documents
Frames page number of frames
JSEventListeners page events Number of listeners
Nodes page DOM node number
LayoutCount page layout number
RecalcStyleCount style recalculation number
LayoutDuration page layout time
p>
RecalcStyleDuration style recalculation duration
ScriptDuration script time
TaskDuration All browser task duration
JSHeapUsedSize JavaScript occupies heap size
< p>JSHeapTotalSize JavaScript heap total
The following data will be returned:
{
Timestamp: 382305.912236,
Documents: 5,< /p>
Frames: 3,
JSEventListeners: 129,
Nodes: 8810,
LayoutCount: 38,
RecalcStyleCount: 56,
LayoutDuration: 0.596341000346001,
RecalcStyleDuration: 0.180430999898817,
ScriptDuration: 1.24401400075294,
TaskDuration: 2.21657899935963,
p>
JSHeapUsedSize: 15430816,
JSHeapTotalSize: 23449600
}
For more functions, please check puppeteer’s github official website.
https://github.com/GoogleChrome/puppeteer#usage
4.3 Linux install Puppeteer
The debugged project under windows, run on linux, Still need to spend a lot of work, need to configure more parameters. As follows:
One, download related dependent packages, these dependent packages are required for chrome to run.
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64
libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86 libXrandConf2. x86_64
alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi
xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
2. Font installation:
yum install ipa-gothic-fonts xorg-x11 -fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
Three, increase—no- sandbox –disable-setuid-sandbox
const browser = await puppeteer.launch({args:[‘–no-sandbox’,’–disable-setuid-sandbox’]})
The author’s working environment is more complicated. In the middle, due to permission problems, the operation error is reported. At this time, some proxy settings need to be added.
5. Puppeteer experience measurement practice
The previous part mainly talked about some basic functions and practices of puppeteer. So how do we solve practical problems based on puppeteer.
5.1 The establishment of specifications
Before using puppeteer, you need to sort out the scenarios used by each microservice, as well as the terminology specifications, etc., and then automate the tools after sorting them out. First, we refer to the Nielsen Usability Principle.
< div class="image-container" style="max-width: 554px; max-height: 144px;">
5.2 Specific use of puppeter
After establishing the rules above, we then evaluate whether each test item can be quantified , How to quantify. For example, we want to check the coverage of components. Figure 4-2 is the public component library used by our products. They all start with ave-, and the name of the checkbox is ave-button. The ordinary checkbox is written with input[type=checkbox]. For each service, we scan the various pages on the front page to see the number of ave-check and native input
checkboxes, so that we can count the coverage of the component library. In the end, all services are driven to rectify and reform.
In the form of components, the experience of each service is basically the same.
Figure 5-2 DevCloud component libraryFinally in the form of a chart To display. As shown in Figure 5-3.
Figure 5-3 ave-checkbox coveragediv>
From the figure, we can see that the ave-checkbox has been rectified.
Through the above methods, we can have a good grasp of whether the entire product design is consistent with our expectations in terms of components, styles, and experience journey.
Our team has been exploring automation. In addition to front-end testing, interface testing, and compilation and construction, we have always followed the concept of being able to use tools to improve efficiency and never rely on manual testing. We continue to practice. Greatly reduce labor costs. Of course, these capabilities have always been open to the outside world: Huawei Cloud software development service DevCloud. Everyone is also welcome to suggest and discuss.
???????6. Reference materials and extended reading materials
The Front-End Tooling Survey 2018-Results
< p>Nielsen Ten Principles of Usability
https://www.jianshu.com/p/53daaa5ba794
Huawei Cloud DevCloud, as a one-stop cloud DevOps platform, has integrated Huawei for nearly 30 years R&D practices and cutting-edge concepts provide developers with R&D tools and services to make software development simple and efficient. Now supports the quota of 5 people or less, you can use it for free, and you can make an appointment for free product demonstrations and technical exchanges. For details, please refer to the official website of HUAWEI CLOUD.
Text: HUAWEI CLOUD DevCloud Le Shao
1, background
1.1 Less front-end automated testing
There are many front-end browsers that cause more page compatibility problems. In addition, the interface changes quickly. The page may be revised two or three times within a month. This leads to fewer front-end automation tests, and everyone is not very careful. In 18 years, a developer in the UK did a survey of some front-end testing tools, as shown in Figure 1-1. From the figure, it can be found that 43% of users have not used any front-end testing tools.
Figure 1-1 1.2 Automated testing based on Puppteer
p>
Puppeteer (Chinese translated as “Puppet”) is Google
The official headless Chrome tool of the Chrome team. This is a node library. It provides high-level APIs to control the DevTools protocol headless Chrome version. Chrome’s DevTools provides a lot of and very convenient page tools, while Puppteteer provides this ability through the Headless method. It can operate on Linux and will surely become the industry benchmark for automated testing of web applications. The scene is very Many.
1.3 Solving practical problems
The author is the front-end team of HUAWEI CLOUD DevCloud. The team adopts a front-end microservice architecture. That is to say, there are many front-end portals, and each Portal has several front-end developments for development and maintenance. There is less communication between developments, and development is carried out in different places. But each service belongs to the DevCloud product, so the page experience, scenes, controls, and terminology need to be consistent. If you pass It is very difficult to manually detect each service page.
2, what can Puppeteer do
It can be said that, Most of the things that can be done manually in the chrome browser can be done with puppteteer! You can manipulate the dom of the page, grab content, etc. In addition, puppeteer can also:
generate screenshots and PDFs of the page;
Grab the SPA and generate pre-rendered content (SSR)
Grab the content you want from the website. Automatic form submission, UI testing, keyboard input, etc.
Create an up-to-date automated test environment, use the latest JavaScript and browser functions, and run tests directly in the latest version of Chrome.
3. Puppeteer version
The earliest version I used was the [email protected] version, which I downloaded through npm i pupptetter. It contains its own browser version. As shown in Figure 3-1.
Figure 3-1 puppeteer comes with a browserIn version 1.7 After .0, google disassembled puppeteer into puppeteer-core and browser. That is to say, the browser needs to download manually. The download address can be matched and downloaded by searching for chromium through the HUAWEI CLOUD mirroring station, as shown in Figure 3-2 .
Figure 3-2 Puppteteer browser chrome downloadOf course different The puppeteer-core version matches a different browser version, otherwise an error will be reported. The version matching is shown in Figure 2-3. You can also check it on the official website github: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
Figure 3-3 puppeteer version matching4. Easy to get started
This part includes windows and linux The configuration and operation of the above. Because it needs to be deployed to the Linux service in the end.
4.1 Simple implementation
It is very easy to use puppeteer under windows, add the following line of code to package.json :
“puppeteer-core”:“1.13.0”,
The following is a simple cut frequency implementation:< /p>
const puppeteer = require(‘puppeteer’);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com’);
await page.screenshot({ path: ‘example.png’});
await browser.close();
})();
4.2 Basic syntax
These are some basic grammars of puppeteer, which can satisfy some common functions.
async/await
Looking at the official example, you can see that almost all operations are asynchronous. If you insist on using callbacks or Promise.then The code written will be very ugly and difficult to read. The official recommendation of Puppeteer is to use the higher version of Node with async/await syntax
async ensures that the function returns a promise, even if it contains non-promises. Is it simple enough? But not only that, there is another keyword, await, which can only be used in async functions. Similarly, it is also very cool.
The keyword await allows JavaScript to wait until a promise is executed and returns its result, then JavaScript will continue to execute.
let value = await promise
Find elements
This is the most commonly used function for UI automation testing, and Puppeteer also handles Quite simple
page.$(selector)
page.$(selector)
This still implements document.querySelector and document.querySelectorAll at the bottom. But what is returned is not a dom object. It is encapsulated.
Get DOM attributes
We write a crawler to crawl the page image list, and it feels like it can be passed
page.$$(selector) Get the element list of the page, and then turn it into a DOM object, get the src, and then it doesn’t work. If you want to get the corresponding DOM
attribute of the element, you need to use a special API: page.$eval (selector, pageFunction[, …args])
Evaluate
If we have some unique needs, we cannot pass page.$( ) Or page.$eval(), you can use the big trick-evaluate. As shown below:
const result = await page.evaluate(() => {
return Promise.resolve(8 * 7);
}) ;
console.log(result); // prints “56”
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));
p>
aWindowHandle; // Handle for the window object. It is equivalent to wrapping the returned object in a layer
Performance
Through page. getMetrics() can get some page performance data.
Timestamp The timestamp when the metrics sample was taken.
Documents page number of documents
Frames page number of frames
JSEventListeners page events Number of listeners
Nodes page DOM node number
LayoutCount page layout number
RecalcStyleCount style recalculation number
LayoutDuration page layout time
p>
RecalcStyleDuration style recalculation duration
ScriptDuration script time
TaskDuration All browser task duration
JSHeapUsedSize JavaScript occupies heap size
< p>JSHeapTotalSize JavaScript heap total
The following data will be returned:
{
Timestamp: 382305.912236,
Documents: 5,< /p>
Frames: 3,
JSEventListeners: 129,
Nodes: 8810,
LayoutCount: 38,
RecalcStyleCount: 56,
LayoutDuration: 0.596341000346001,
RecalcStyleDuration: 0.180430999898817,
ScriptDuration: 1.24401400075294,
TaskDuration: 2.21657899935963,
JSHeapUsedSize: 15430816,
JSHeapTotalSize: 23449600
}
For more functions, please check puppeteer’s github official website.
https://github.com/GoogleChrome/puppeteer#usage
4.3 Linux install Puppeteer
The debugged project under windows, run on linux, Still need to spend a lot of work, need to configure more parameters. As follows:
One, download related dependent packages, these dependent packages are required for chrome to run.
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64
libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86 libXrandConf2. x86_64
alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi
xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
2. Font installation:
yum install ipa-gothic-fonts xorg-x11 -fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
Three, increase—no- sandbox –disable-setuid-sandbox
const browser = await puppeteer.launch({args:[‘–no-sandbox’,’–disable-setuid-sandbox’]})
The author’s working environment is more complicated. In the middle, due to permission problems, the operation error is reported. At this time, some proxy settings need to be added.
5. Puppeteer experience measurement practice
The previous part mainly talked about some basic functions and practices of puppeteer. So how do we solve practical problems based on puppeteer.
5.1 The establishment of specifications
Before using puppeteer, you need to sort out the scenarios used by each microservice, as well as the terminology specifications, etc., and then automate the tools after sorting them out. First, we refer to the Nielsen Usability Principle.
< div class="image-container" style="max-width: 554px; max-height: 144px;">
div>
5.2 Specific use of puppeter
After establishing the rules above, we then evaluate whether each test item can be quantified and how to quantify it. For example, we want to check the coverage of components. Figure 4-2 is the public component library used by our products. They all start with ave-, and the name of the checkbox is ave-button. The ordinary checkbox is written with input[type=checkbox]. For each service, we scan the various pages on the front page to see the number of ave-check and native input
checkboxes, so that we can count the coverage of the component library. In the end, all services are driven to rectify and reform.
In the form of components, the experience of each service is basically the same.
Figure 5-2 DevCloud component libraryFinally in the form of a chart To display. As shown in Figure 5-3.
Figure 5-3 ave-checkbox coveragediv>
From the figure, we can see that the ave-checkbox has been rectified.
Through the above methods, we can have a good grasp of whether the entire product design is consistent with our expectations in terms of components, styles, and experience journey.
Our team has been exploring automation. In addition to front-end testing, interface testing, and compilation and construction, we have always followed the concept of being able to use tools to improve efficiency and never rely on manual testing. We continue to practice. Greatly reduce labor costs. Of course, these capabilities have always been open to the outside world: Huawei Cloud software development service DevCloud. Everyone is also welcome to suggest and discuss.
???????6. Reference materials and extended reading materials
The Front-End Tooling Survey 2018-Results
< p>Nielsen Ten Principles of Usability
https://www.jianshu.com/p/53daaa5ba794
Huawei Cloud DevCloud, as a one-stop cloud DevOps platform, has integrated Huawei for nearly 30 years R&D practices and cutting-edge concepts provide developers with R&D tools and services to make software development simple and efficient. Now supports 5 people or less, can use it for free, and can make appointments for free product demonstrations and technical exchanges. For details, please refer to the official website of Huawei Cloud
Text: Huawei Cloud DevCloud Le Shao
1. Background
1.1 Less front-end automated testing
Many front-end browsers cause page compatibility issues There are more, and the interface changes quickly. The page may be revised two or three times within a month. This leads to less automated testing of the front-end, and everyone is not very careful. In 18 years, a developer in the UK did a survey of some front-end testing tools, as shown in Figure 1-1. From the figure, it can be found that 43% of users have not used any front-end testing tools.
Figure 1-1 1.2 Automated test based on Puppteer
p>
Puppeteer (Chinese translated as “Puppet”) is Google
The official headless Chrome tool of the Chrome team. This is a node library. It provides high-level APIs to control the DevTools protocol headless Chrome version. Chrome’s DevTools provides a lot of and very convenient page tools, while Puppteteer provides this ability through the Headless method, which can operate on Linux, and will surely become the industry benchmark for automated testing of web applications. The scene is very Many.
1.3 Solving practical problems
The author is the front-end team of HUAWEI CLOUD DevCloud. The team adopts a front-end microservice architecture. That is to say, there are many front-end portals, and each Portal has several front-end developments for development and maintenance. There is less communication between developments, and development is still carried out in different places. But each service belongs to the DevCloud product, so the page experience, scenes, controls, and terminology need to be consistent. If you pass It is very difficult to manually detect each service page.
2, what can Puppeteer do
You can say so, Most of the things that can be done manually in the chrome browser can be done with puppteteer! You can manipulate the dom of the page, grab content, etc. In addition, puppeteer can also:
generate screenshots and PDFs of the page;
p>
Grab the SPA and generate a pre- Presented content (SSR)
Grab the content you want from the website.自动表单提交，UI测试，键盘输入等等
创建一个最新的自动化测试环境，使用最新的JavaScript和浏览器功能，直接在最新版的chrome中运行测试。
3、Puppeteer版本
我最早使用的版本是[email protected]版本，通过npm i pupptetter下载。里面包含自带浏览器版本。如图所示3-1所示。
图3-1 puppeteer自带浏览器 在版本1.7.0之后，google把puppeteer拆成puppteteer-core和浏览器两部分。也就是说浏览器需要自己手动去下载。下载地址可以通过华为云镜像站搜索chromium进行匹配下载，如图3-2所示。
图3-2 puppteteer浏览器chrome下载 当然不同的puppeteer-core版本匹配不同的浏览器版本，不然会有报错。版本匹配如图2-3所示。大家也可以在官网github上进行查看：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md
图3-3 puppeteer版本匹配 4、 轻松入门
这部分包括windows和linux上的配置和运行。因为最终是需要部署到linux服务上去。
4.1 简单实现
如果windows下使用puppeteer非常容易，在package.json加上下面一行代码：
“puppeteer-core”:“1.13.0”,
下面是一点简单截频实现：
const puppeteer = require(‘puppeteer‘);
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com‘);
await page.screenshot({path: ‘example.png‘});
await browser.close();
})();
4.2 基本语法
这些是puppeteer一些基础的语法，可以满足一些常用功能。
async/await
看官方的例子就可以看出来，几乎所有的操作都是异步的，如果坚持使用回调或者Promise.then 写出来的代码会非常丑陋且难读，Puppeteer 官方推荐的也是使用高版本 Node 用 async/await 语法
async确保了函数返回一个promise，即使其中包含非promise。够简单了吧？但是不仅仅只是如此，还有另一个关键词await，只能在async函数里使用，同样，它也很cool。
关键词await可以让JavaScript进行等待，直到一个promise执行并返回它的结果，JavaScript才会继续往下执行。
let value = await promise
查找元素
这是 UI 自动化测试最常用的功能了，Puppeteer 的处理也相当简单
page.$(selector)
page.$(selector)
这个在底层依然是执行document.querySelector和document.querySelectorAll。但返回的不是dom对象。而是封装的。
获取DOM属性
我们写爬虫爬取页面图片列表，感觉可以通过
page.$$(selector) 获取到页面的元素列表，然后再去转成 DOM 对象，获取 src，然后并不行，想做对获取元素对应 DOM
属性的获取，需要用专门的 API：page.$eval(selector, pageFunction[, …args])
Evaluate
如果我们有一些及其个性的需求，无法通过 page.$() 或者 page.$eval() 实现，可以用大招——evaluate。如下所示：
const result = await page.evaluate(() => {
return Promise.resolve(8 * 7);
});
console.log(result); // prints “56”
const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));
aWindowHandle; // Handle for the window object. 相当于把返回对象做了一层包裹
性能
通过 page.getMetrics() 可以得到一些页面性能数据。
Timestamp The timestamp when the metrics sample was taken.
Documents 页面文档数
Frames 页面 frame 数
JSEventListeners 页面内事件监听器数
Nodes 页面 DOM 节点数
LayoutCount 页面 layout 数
RecalcStyleCount 样式重算数
LayoutDuration 页面 layout 时间
RecalcStyleDuration 样式重算时长
ScriptDuration script 时间
TaskDuration 所有浏览器任务时长
JSHeapUsedSize JavaScript 占用堆大小
JSHeapTotalSize JavaScript 堆总量
会返回如下数据：
{
Timestamp: 382305.912236,
Documents: 5,
Frames: 3,
JSEventListeners: 129,
Nodes: 8810,
LayoutCount: 38,
RecalcStyleCount: 56,
LayoutDuration: 0.596341000346001,
RecalcStyleDuration: 0.180430999898817,
ScriptDuration: 1.24401400075294,
TaskDuration: 2.21657899935963,
JSHeapUsedSize: 15430816,
JSHeapTotalSize: 23449600
}
更多功能请查看puppeteer的github官网。
https://github.com/GoogleChrome/puppeteer#usage
4.3 Linux安装Puppeteer
windows下调试好的项目，在linux上运行，还是需要费一番功夫，需要配置更多的参数。如下：
一、下载相关依赖包，这些依赖包都是chrome运行所需要的。
yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64
libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64
alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi
xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
二、字体安装：
yum install ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc
三、增加—no-sandbox –disable-setuid-sandbox
const browser = await puppeteer.launch({args:[‘–no-sandbox‘, ‘–disable-setuid-sandbox‘]})
笔者的工作环境比较复杂，中间因为权限问题导致运行报错，这个时候需要增加一些代理设置。
5、puppeteer体验度量实践
前面主要是讲一些puppeteer基本功能和实践。那我们基于puppeteer怎么解决实际问题的呢。
5.1 规范的建立
在使用puppeteer之前，需要先梳理各微服务使用的场景，以及术语规范等，梳理清楚之后在来进行工具自动化。首先我们参照尼尔森可用性原则。
图5-1 测试分类 5.2 具体使用puppteer
在上面建立规则之后，我们再针对每个检测项评估是否可以量化，怎么量化。比如我们想检测组件的覆盖度。图4-2是我们产品所使用的公共组件库。都是以ave-开头，checkbox的命名就是ave-button。那普通的checkbox则是以input[type=checkbox]来写的。我们针对每个服务去扫面线上各个页面，看使用ave-check和使用原生input
checkbox的数量，这样就能统计出组件库的覆盖度。最终驱动各服务去整改。
通过组件的形式使得各个服务体验基本一致。
图5-2 DevCloud组件库 最终通过图表的形式来进行展示。如图5-3所示。
图5-3 ave-checkbox覆盖度 从图上我们可以看到ave-checkbox得到整改。
通过以上的方式，我们可以在组件、样式、以及体验旅程方面都能很好的把握整个产品设计是否与我们预期是一致的。
我们团队在自动化方面一直在探索，除了在前端测试、接口测试以及编译构建方面也一直遵从能够使用工具提升效率，绝不靠人工来进行检测的理念，不断的实践，极大的减少了人力成本。当然这些能力也一直是对外开放的：华为云软件开发服务DevCloud。也欢迎大家来建议和探讨。
???????6、 参考资料及扩展阅读材料
The Front-End Tooling Survey 2018 – Results
尼尔森可用性十大原则
https://www.jianshu.com/p/53daaa5ba794
华为云DevCloud作为一站式云端DevOps平台，集成华为近30年研发实践和前沿理念，面向开发者提供研发工具服务，让软件开发简单高效。现支持5人以下额度范围内，可以免费使用，并且可以预约免费的产品演示和技术交流，详情查看华为云官网
图1-1 
图3-1 puppeteer自带浏览器 
图3-2 puppteteer浏览器chrome下载 
图3-3 puppeteer版本匹配 
图5-1 测试分类 
图5-2 DevCloud组件库 
图5-3 ave-checkbox覆盖度 