Web Component Tester Set Up

What's Web Component Tester

A browser-based unit testing environment that for web components
一个针对web组件（比如Polymer工程下的各个web组件），基于浏览器的Javascript单元测试环境。

Step 1

First of All, in your local PC,please check if there are:
首先，在你的机器中，请检查是否已安装：
1.Java
2.Visible Browser(Chrome, etc.)
3.Nodejs
4.Npm
One of workable combinations:Java@8+Node@6+npm@3+chrome@58
其中一个成功搭建的版本组合:Java@8+Node@6+npm@3+chrome@58

Step 2

Please check if your git is installed and correctly configured
请检查git是否已安装且正确配置。

Step 3

Under the root or your project directory, run:
在你的项目根目录下，执行：
npm install --save-dev web-component-tester
Note that it will take a little long time.
请注意这一步需要一些时间。

Step 4

Once installed, run:
安装成功后，请执行：
wct or node_modules/web-component-tester/bin/wct
During this process, below issues may come up:
在这期间，可能会出现以下问题:

'express.use module not found'
It may be a problem because of the version of tester, you can try web-component-tester@4.0.3
这个问题可以是由于tester的版本，可以尝试4.0.3。
'unable to connect to selenium'
Generally, it's a problem because of proxy, so you can try to delete all proxy statements, such as HTTPS_PROXY, HTTP_PROXY in .npmrc, HTTP_PROXY in env variables
一般来说，这是代理问题，请删除当前环境下的代理，比如用户根目录下.npmrc中的代理声明，以及环境变量中的代理声明。
Note that you need to add them back when you have to install something by npm.
Drivers of browsers missing
Please download them from website into the given path in the error log. Note that name of the driver file should be same as given in the error log and the extension of the driver is not .tar, .jar or .exe.
请根据提示下载缺失的driver，注意driver的扩展名也要与提示保持一致。

Step 5

npm install --save-dev web-component-tester-istanbul
It’s a plugin which can work together with web component tester to generate code coverage report.
这是一个可以生成代码覆盖率报告的插件。

Step 6

Create a wct.conf.json under the root of your project, and add below content into it:
在项目根目录下，创建wct.conf.json, 然后添加如下内容：

{
        "verbose": true,
        "persistent": false,
        "plugins": {
                "local": {
                        "browsers": ["chrome"],
                        "skipSeleniumInstall": true
                },
                "istanbul": {
                        "dir": "./coverage",
                        "reporters": ["text-summary", "lcov", "json"],
                        "include": ["/test/*/*.html"],
                        "exclude": []
                }
        }
}

Note that files in "include" should be files whose code coverage you want to calculate and files in "exclude" should be files in "include" whose code coverage you don’t want to calculate.
请注意include中保存的是需要计算代码覆盖率的文件范围， exclude中保存的是include中不需要计算代码覆盖率的文件。

Step 7

Run wct following step 3# again
根据第三步再次执行wct

Step 8

If you succeed in running wct, you will find that it takes a little long time.
如果你成功的执行wct，你会发现这要花费较长时间。
In many cases , we just want to run our test cases, not caring about the coverage report.
在很多情况下，我们只是想跑单元测试用例，并不关心代码覆盖率。
Or you just fail in running wct after following step 1# to step 7#.
或者你在第1到7步之后，还没有成功执行wct。
Don’t worry, there is an alternative way for you to run your test cases effectively.
必担心，还有一个可以让你高效执行测试用例的方法。
1.Run:
npm install Polymer/web-component-tester--save
2.Run:
npm install puer --save-dev
3.Run:
puer
4.Open your test file in the browser, test cases in the file will be run automatically.
在puer给出的网址中，打开你的测试文件，就可以自动执行测试用例。
For details, please refer to run WCT tests directly in a browser via a web server of your choosing
更多详细内容，请参考通过WCT直接在任一Web Server上进行单元测试

Tips

After running wct successfully, you will find that the browser always closes itself once all test cases run, and no time for you to check which one fails if there is. There is one option of use, you can run:
如果你成功执行了wct,你会发现所有测试用例结束后，浏览器总是立即关闭，来不及检查测试用例的执行情况（哪些成功，哪些失败，以及失败的原因），这时，你可以在执行的时候加一个参数：
wct -p
Any question or better practice will be appreciated if you can leave it here.
如有任何问题或者更好的经验请留言。

最后编辑于：2017.12.08 07:50:17