标签: web-component-tester

我使用Codeship 基于Polymer入门套件v1.1测试我的项目.

当我npm test在测试管道内运行时,我看到以下错误:

> @ test /home/rof/src/github.com/TFarla/night-live
> gulp test:local

/home/rof/src/github.com/TFarla/night-live/node_modules/browser-sync/node_modules/lodash/index.js:8404
/**
^^^

SyntaxError: Unexpected token ILLEGAL
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/home/rof/src/github.com/TFarla/night-live/node_modules/browser-sync/lib/hooks.js:3:20)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
npm ERR! Test failed.  See above for more details.

以下是设置命令:

# By default we use the Node.js version set in your package.json or the latest
# …

我们正在尝试运行Web组件测试程序,但它一直停留在Selenium步骤上.

我跑的时候 wct -l chrome --verbose

我得到以下内容

hook: prepare
hook: prepare:selenium
hook done: prepare:selenium
Starting Selenium server for local browsers
11:47:46.357 INFO - Launching a standalone server
Setting system property webdriver.chrome.driver to C:\Users\<user>\AppData\Roaming\npm\node_modules\web-component-tester\node_modules\wct-local\node_modules\selenium-standalone\.selenium\chromedriver\2.13-x64-chromedriver
Setting system property webdriver.ie.driver to C:\Users\<user>\AppData\Roaming\npm\node_modules\web-component-tester\node_modules\wct-local\node_modules\selenium-standalone\.selenium\iedriver\2.44.0-x64-IEDriverServer.exe
11:47:46.809 INFO - Java: Oracle Corporation 25.31-b07
11:47:46.809 INFO - OS: Windows 7 6.1 x86
11:47:46.872 INFO - v2.44.0, with Core v2.44.0. Built from revision 76d78cf
11:47:47.669 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:11655/wd/hub
11:47:47.669 INFO - Version Jetty/5.1.x
11:47:47.685 …

我需要配置Polymer web-component-tester以使用运行的Selenium Grid,http://jenkins.myapp.corp.web:4444/wd/hub这样我就可以在Jenkins上运行我的测试.什么是Grunt配置？我猜这样的事情:

'wct-test': {
  local: {
    options: {
      activeBrowsers: [{
        browserName: 'chrome',
        url: 'http://jenkins.myapp.corp.web:4444/wd/hub'
      }]
    }
  }
}

在开发Polymer Web组件时,更具体地说,在添加其他测试时,每次调整测试时运行所有组件的测试都会变得非常麻烦.

最简单的答案是评论不应该运行的测试,但这也很麻烦.

由于Web组件测试人员使用Mocha,因此应该有一些方法只能指示要运行的特定测试集.定位特定文件很容易,但如何针对文件中的特定测试进行定位？

Polymer Starter Kit包含web-component-tester,用于对您的自定义元素进行单元测试.在wct.conf.json中,您可以指定运行测试的浏览器.

{
  "suites": ["app/test"],
  "plugins": {
    "local": {
    "browsers": ["firefox"]
  }
}

不幸的是,当我通过gulp启动测试时,wct无法找到我当地的Firefox.我在GitHub上看到wct使用启动板来检测本地浏览器.Afaik,在Windows机器上,启动板在默认目录"C:\ Program Files\Mozilla Firefox"中搜索Firefox.但我在不同的目录中安装了Firefox.

有没有办法在wct.conf.json中配置我的Firefox目录的路径？

我有数百个聚合物测试套件.在每次测试结束时,我想做一些自定义的质量检查.有没有办法在我的所有测试套件中全局执行此操作？

Jenkins没有注意到我的测试用例是在Polymer中运行的,我不太确定如何生成正确的JUnit文件.使用web-component-tester,如何生成JUnit格式的测试输出？

如何使用sandbox.stub测试框架Sinon来覆盖egnavigator.language或navigator.userAgent进行测试？

当我尝试使用以下内容时：

suite('agent', function () {
  var sandbox;
  setup(function () {
    // create sandbox environment for mocking about
    sandbox = sinon.sandbox.create();
  });
  teardown(function () {
    // restore the environment as it was before
    sandbox.restore();
  });
  test('language', function () {
    assert.equal(au.env.agent.language, navigator.language);
    if (!navigator.language) assert.equal(au.env.agent.language, 'de');
    var lang = "test_URK";
    sandbox.stub(window.navigator, 'language', lang);
    assert.equal(au.env.agent.language, lang);
  });
});

然后我会收到以下错误：无法存根不存在的自有属性语言：

这些存根均未按预期工作：

• sandbox.stub(window.navigator, '语言', lang);
• sandbox.stub(navigator, 'browserLanguage', lang);

正在模拟导航器对象。

有什么提示吗？

我想设置web-component-tester来测试我的 web 组件。我通过 npm (devDependency) 安装了它并创建了以下脚本：

包.json：

  "scripts": {
    "wcttest": "./node_modules/.bin/wct --npm src/app/modules/essen/components/essen-list/test/wct-test.html"
  },

正如脚本所述，我在那里有 .html 文件。但是现在，如果我运行脚本npm run wcttest，则会打开以下路线：

http://localhost:8081/components/wc-frontend/generated-index.html?cli_browser_id=0wc-frontend项目文件夹的根名称在哪里。但我不明白，为什么它components首先打开了路径。

测试打开了我安装的所有浏览器，但只有一个白页。如果我打开控制台有以下脚本：

<script>
WCT.loadSuites(["src/app/modules/essen/components/essen-list/test/wct-test.html"]);
<script>

这里的路径看起来是正确的。

wct-test.html

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <script src="../../../../../../../node_modules/mocha/mocha.js</script>
    <script src="../../../../../../../node_modules/wct-mocha/wct- 
    mocha.js"></script>
    <script src="../../../../../../../node_modules/web-component-tester/browser.js"></script>
    <script type="module" src="../essen-list.component.js"></script>
</head>
<body>
<mp-essen-list></mp-essen-list>

<script>

    suite('suite', function () {
        const list = document.body.querySelector('mp-essen-list');

        test('test', function () {
            list.setAttribute('value', 100);
            assert.equal(list.value, 100);
            //console.log('test');
            //assert.equal(list.shadowRoot.querySelector('#speisekarte').style.left, 50);
        });
    });

</script>
</body>
</html>

编辑： …

我在测试上下文中对 shadowroot 中的元素执行操作时遇到困难。假设我有一个 Web 组件<my-component />，它包含一个按钮<input id="my-button" type="submit" />

从 chrome 控制台，我可以执行以下操作：

document.getElementsByTagName('my-component')[0].shadowRoot.querySelector('#my-button').click()

我正在努力与 puppeteer 做同样的事情。

  it('should click the button', async () => {
    await page.goto(`https://localhost:${port}`, {
      waitUntil: ['networkidle0', 'load'],
    });

    await page.$eval('my-component', (el: Element) => {
      el.shadowRoot.querySelector('#my-button').click();
    });
  });

单击该按钮应该会向我的服务器发出一个 http 请求，该请求会检索一些数据，然后我想在 dom 中对其进行断言。请求永远不会触发。建议？

我想在没有浏览器弹出窗口的情况下运行测试。如图所示安装wct-headless并配置wct.config.json

{
  "plugins": {
    "local": {
      "disabled": true
    },
    "headless": {
      "browsers": [
        "chrome",
        "firefox"
      ],
      "browsersOptions": {
        "chrome": [
          "headless",
          "disable-gpu",
          "no-sandbox"
        ],
        "firefox": [
          "--headless"
        ]
      }
    },
    "sauce": false,
    "xunit-reporter": {
      "output": "testfile.xml"
    }
  }
}

执行polymer test时出现以下错误

找不到名为“headless”的 WCT 插件

包.json

"dependencies": {
  "@polymer/polymer": "^3.0.0"
},
"devDependencies": {
  "@polymer/iron-demo-helpers": "^3.0.0-pre.19",
  "@webcomponents/webcomponentsjs": "^2.0.0",
  "wct-browser-legacy": "^1.0.0",
  "wct-headless": "^2.2.2",
  "web-component-tester": "^6.8.0",
  "wct-xunit-reporter": "1.0.2"
}

我应该如何配置 wct.conf.json ??

我已按照此处的指南使用纯JS / HTML / CSS创建了一个本地自定义元素作为Web组件。

现在我想知道如何为这种组件编写单元测试。有一个出色的库Web组件测试器，但我相信它仅适用于用聚合物创建的组件。

由于我的组件不是聚合物纤维网组件，而是天然的组件，因此有人可以为我指明进行单元测试的正确方向。