简介
web-component-tester (WCT) 是一个npm包，用于在Web组件的测试中进行端到端（e2e）和单元测试。 它是由Polymer团队创建的，目前已成为一个独立的npm包。
WCT通过运行本地服务器并与浏览器内核交互来执行测试。它能够支持各种浏览器和测试框架，并提供了一些特殊的功能，例如自动化测试和CI / CD集成。
安装
要安装WCT，请打开终端并输入以下命令：
$ npm install -g web-component-tester
使用
配置
在项目根目录下创建一个wct.conf.json文件以配置WCT。在该文件中，您可以设置要测试的文件、测试框架以及要使用的浏览器等内容。下面是一个示例配置文件：
-- -------------------- ---- ------- - ---------- - -------- - ----------- ---------- ---------- -- -------- ----- -- --------- - ----------------- -- ------------ - --------------- - --------------------- -------------------- ------ ---- - - -展开代码
在这个配置中，我们告诉WCT只测试test/index.html文件。我们还设置使用Chrome和Firefox浏览器进行测试。
运行测试
运行测试非常简单。在终端中运行以下命令即可：
$ wct这将启动本地服务器并在浏览器中打开测试页面，然后运行测试。
示例
测试一个简单的Web组件
让我们来看一个简单的示例，展示如何使用WCT测试一个Web组件。
首先，我们创建一个名为my-button.html的Web组件，代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- -------------- ------- ---------------------------------------------------------- ----- ------------ ------------------------------------- ----- ------------ --------------------------------------------------- ------- ------ ----------- --------------- ---------- ------------------ ------------------------------------ ----------- -------- ----- -------- ------- --------------- - ------ --- ---- - ------ ------------ - ------ --- ------------ - ------ - ----- - ----- ------- ------ ------ - -- - - ----------------------------------------- ---------- --------- ------------- ------- -------展开代码
然后，我们创建一个名为my-button_test.html的测试用例文件，代码如下：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- ------ ------------ ------- ---------------------------------------------------------- ------- ------------------------------- ------- ------ ------------- ----------- ---------- ---------- ------------------------ ----------- --------------- -------- ----------------- ---------- - --- ------- ---------------- - ------ - ----------------- --- ------------ --- ------- ------ ---------- - ------------------------- -------- --- --- --------- ------- -------展开代码
在这个测试用例中，我们使用了Polymer的测试框架和WCT的test-fixture元素。 我们设置了一个按钮图标为“home”，然后编写一个测试来验证该图标是否正确。
接下来，我们将这两个文件添加到我们的WCT配置中。 在wct.conf.json文件中，我们添加以下行：
"suites": [ > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/49058) ，转载请注明来源 [https://www.javascriptcn.com/post/49058](https://www.javascriptcn.com/post/49058)
