1

我正在努力寻找某种方法来测试我的 vanilla webcomponents。我发现有人在尝试相同的方法，我尝试准确地重现他的步骤并接受了答案（Web Component / HtmlElement：单元测试）。

我无法想象没有找到测试的原因。它似乎看起来在错误的地方。如果是这样，也许我的问题的答案将是如何编辑 wct.conf.js 中的路径以找到真正的测试（我不确定这是根本原因，但在提供的错误之前这是我最好的） .

wct.conf.js

module.exports = {
    npm:true,
    verbose: true,
    plugins: {
        local: {
            browsers: ["chrome"]
        }
    },
    configuration: { suites:
        [ 'test/hello-world-test.html']},
    wctPackageName: "wct-browser-legacy"
};

你好世界test.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../node_modules/web-component-tester/browser.js"></script>
    <script src="../src/hello-world.js"></script>
</head>
<body>
    <test-fixture id="helloWorldFixture">
        <template>
            <hello-world>
            </hello-world>
        </template>
    </test-fixture>
    <script>
        suite('<hello-world>', () => {
            let component;
            setup(() => {
                component = fixture('helloWorldFixture');
            });

            test('contains hello world string ?', () => {
                let index = component.innerText.indexOf('Hello');
                assert.isAtLeast(index, 0);
            });
        });
    </script>
</body>
</html>

安慰：

resource@DESKTOP-AKCNE7F C:\_d\WSs\basic-vanilla-webcomponent
# wct --npm -wct-package-name=wct-browser-legacy
step: loadPlugins
step: configure
hook: configure
Expanded local browsers: [ 'chrome' ] into capabilities: [ { browserName: 'chrome',
    version: '75',
    chromeOptions:
     { binary:
        'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
       args: [Array] } } ] with browserOptions: undefined
configuration: { suites: [ 'test/hello-world-test.html' ],
  verbose: true,
  quiet: false,
  expanded: false,
  testTimeout: 90000,
  persistent: false,
  extraScripts: [],
  clientOptions:
   { root: '/components/',
     verbose: true,
     environmentScripts:
      [ 'stacky/browser.js',
        'wct-browser-legacy/node_modules/async/lib/async.js',
        'wct-browser-legacy/node_modules/lodash/index.js',
        'wct-browser-legacy/node_modules/mocha/mocha.js',
        'chai/chai.js',
        '@polymer/sinonjs/sinon.js',
        'sinon-chai/lib/sinon-chai.js',
        'accessibility-developer-tools/dist/js/axs_testing.js',
        'wct-browser-legacy/node_modules/@polymer/test-fixture/test-fixture.js' ] },
  compile: 'auto',
  activeBrowsers:
   [ { browserName: 'chrome', version: '75', chromeOptions: [Object] } ],
  browserOptions: {},
  plugins:
   { local:
      { disabled: false,
        browsers: [Array],
        seleniumArgs: [],
        javaArgs: [],
        skipSeleniumInstall: false },
     sauce: { disabled: false } },
  registerHooks: [Function: registerHooks],
  enforceJsonConf: false,
  webserver:
   { hostname: 'localhost',
     _generatedIndexContent:
      '<!doctype html>\n<html>\n\n<head>\n  <meta charset="utf-8">\n  <script>\n    window.WCT = {"root":"/components/","verbose":true,"environmentScripts":["stacky/browser.js","wct-browser-legacy/node_modules/async/lib/async.js","wct-browser-legacy/node_modules/lodash/index.js","wct-browser-legacy/node_modules/mocha/mocha.js","chai/chai.js","@polymer/sinonjs/sinon.js","sinon-chai/lib/sinon-chai.js","accessibility-developer-tools/dist/js/axs_testing.js","wct-browser-legacy/node_modules/@polymer/test-fixture/test-fixture.js"]};\n    window.__generatedByWct = true;\n  </script>\n  \n    <script src="../wct-browser-legacy/browser.js"></script>\n  \n  \n</head>\n\n<body>\n  <script>\n    WCT.loadSuites(["test/hello-world-test.html"]);\n  </script>\n</body>\n\n</html>\n' },
  moduleResolution: 'node',
  npm: true,
  configuration: { suites: [ 'test/hello-world-test.html' ] },
  wctPackageName: 'wct-browser-legacy',
  root: 'C:\\_d\\WSs\\basic-vanilla-webcomponent',
  ttyOutput: true,
  _: [],
  origSuites: [ 'test/' ] }
hook: prepare
hook: prepare:selenium
Installing and starting Selenium server for local browsers
----------
selenium-standalone installation starting
----------

---
selenium install:
from: https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar
to: C:\_d\WSs\basic-vanilla-webcomponent\node_modules\selenium-standalone\.selenium\selenium-server\3.141.59-server.jar
---
chrome install:
from: https://chromedriver.storage.googleapis.com/2.43/chromedriver_win32.zip
to: C:\_d\WSs\basic-vanilla-webcomponent\node_modules\selenium-standalone\.selenium\chromedriver\2.43-x64-chromedriver
---
ie install:
from: https://selenium-release.storage.googleapis.com/3.12/IEDriverServer_x64_3.12.0.zip
to: C:\_d\WSs\basic-vanilla-webcomponent\node_modules\selenium-standalone\.selenium\iedriver\3.12.0-x64-IEDriverServer.exe
---
firefox install:
from: https://github.com/mozilla/geckodriver/releases/download/v0.20.1/geckodriver-v0.20.1-win64.zip
to: C:\_d\WSs\basic-vanilla-webcomponent\node_modules\selenium-standalone\.selenium\geckodriver\0.20.1-x64-geckodriver
---
edge install:
from: https://download.microsoft.com/download/F/8/A/F8AF50AB-3C3A-4BC4-8773-DC27B32988DD/MicrosoftWebDriver.exe
to: C:\_d\WSs\basic-vanilla-webcomponent\node_modules\selenium-standalone\.selenium\edgedriver\17134-MicrosoftEdgeDriver.exe
---
File from https://selenium-release.storage.googleapis.com/3.12/IEDriverServer_x64_3.12.0.zip has already been downloaded
---
File from https://selenium-release.storage.googleapis.com/3.141/selenium-server-standalone-3.141.59.jar has already been downloaded
---
File from https://chromedriver.storage.googleapis.com/2.43/chromedriver_win32.zip has already been downloaded
---
File from https://github.com/mozilla/geckodriver/releases/download/v0.20.1/geckodriver-v0.20.1-win64.zip has already been downloaded


-----
selenium-standalone installation finished
-----
16:22:38.752 INFO [GridLauncherV3.parse] - Selenium server version: 3.141.59, revision: e82be7d358
16:22:38.872 INFO [GridLauncherV3.lambda$buildLaunchers$3] - Launching a standalone Selenium Server on port 59287
2019-07-16 16:22:38.970:INFO::main: Logging initialized @682ms to org.seleniumhq.jetty9.util.log.StdErrLog
16:22:39.638 INFO [WebDriverServlet.<init>] - Initialising WebDriverServlet
16:22:40.476 INFO [SeleniumServer.boot] - Selenium Server is up and running on port 59287
Selenium server running on port 59287
hook: define:webserver
hook: prepare:webserver
step: runTests
chrome 75                CALL init({"browserName":"chrome","version":"75","chromeOptions":{"binary":"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","args":["start-maximized"]},"variant":""})
chrome 75                POST /session {"desiredCapabilities":{"browserName":"chrome","version":"75","chromeOptions":{"binary":"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","args":["start-maximized"]},"variant":"","javascriptEnabled":true,"platform":"ANY"}}
16:22:44.347 INFO [ActiveSessionFactory.apply] - Capabilities are: {
  "browserName": "chrome",
  "chromeOptions": {
    "binary": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
    "args": [
      "start-maximized"
    ]
  },
  "javascriptEnabled": true,
  "variant": "",
  "version": "75"
}
16:22:44.349 INFO [ActiveSessionFactory.lambda$apply$11] - Matched factory org.openqa.selenium.grid.session.remote.ServicedSession$Factory (provider: org.openqa.selenium.chrome.ChromeDriverService)
Starting ChromeDriver 2.43.600210 (68dcf5eebde37173d4027fa8635e332711d2874a) on port 2488
Only local connections are allowed.
16:22:47.850 INFO [ProtocolHandshake.createSession] - Detected dialect: OSS
chrome 75                RESPONSE init({"browserName":"chrome","version":"75","chromeOptions":{"binary":"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe","args":["start-maximized"]},"variant":""})
chrome 75                CALL get("http://localhost:8081/components/undefined/generated-index.html?cli_browser_id=0")
chrome 75                POST /session/:sessionID/url {"url":"http://localhost:8081/components/undefined/generated-index.html?cli_browser_id=0"}
16:22:48.253 INFO [RemoteSession$Factory.lambda$performHandshake$0] - Started new session a21a3321683b76d725efa872eeb59d5b (org.openqa.selenium.chrome.ChromeDriverService)
[BABEL] Note: The code generator has deoptimised the styling of undefined as it exceeds the max of 500KB.
Test client opened sideband socket
chrome 75                Beginning tests via http://localhost:8081/components/undefined/generated-index.html?cli_browser_id=0
chrome 75                CALL maximize()
chrome 75                POST /session/:sessionID/window/function(err)%20%7B%0A%20%20%20%20%20%20if(err)%20%7B%0A%20%20%20%20%20%20%20%20err.message%20=%20%27[%27%20+%20name%20+%20niceArgs(fargs.all)%20+%20%22]%20%22%20+%20err.message;%0A%20%20%20%20%20%20%20%20if(fargs.callback)%20%7B%20fargs.callback(err);%20%7D%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20var%20cbArgs%20=%20__slice.call(arguments,%200);%0A%20%20%20%20%20%20%20%20_this.emit(%27command%27,%20%22RESPONSE%22%20,%20name%20+%20niceArgs(fargs.all),%0A%20%20%20%20%20%20%20%20%20%20niceResp(_.drop(cbArgs)));%0A%20%20%20%20%20%20%20%20if(fargs.callback)%20%7B%20fargs.callback.apply(null,%20cbArgs);%20%7D%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D/maximize
chrome 75                RESPONSE get("http://localhost:8081/components/undefined/generated-index.html?cli_browser_id=0")
chrome failed to maximize
chrome 75                CALL title()
chrome 75                GET /session/:sessionID/title
chrome 75                RESPONSE title()
chrome 75                ✖ test/hello-world-test.html

  Timed out loading http://localhost:8081/components/undefined/test/hello-world-test.html
    <unknown> at   <unknown> at /components/wct-browser-legacy/browser.js:733:0

chrome 75                Tests failed: 1 failed tests
chrome 75                CALL quit()
chrome 75                DELETE /session/:sessionID
chrome 75                RESPONSE quit()
chrome 75                BrowserRunner complete
Test run ended in failure: 1 failed tests
hook: cleanup

chrome 75 (0/0/1)


Error: 1 failed tests

在此处输入图像描述

4

1 回答 1

1

我偶然发现了为 wct-local test 指定浏览器位置的答案。这是不同的问题（关于使用 gulp），但我注意到与我的 wct.conf.js 不同的东西，我试了一下，现在在https://github.com/jimisdrpc/basic-vanilla-webcomponent进行单元测试工作与 wct。我改变的是

configuration: { suites:
    [ 'test/hello-world-test.html']},

我写

suites:
    ["test/hello-world-test.html"],

我仍然收到警告“chrome无法最大化”，但这是在另一个问题中发布的（“chrome无法最大化”在单元测试期间），我不知道这是否真的很重要，因为现在单元测试已经启动并正在运行. 最后，我只需在命令提示符下键入 wct。

PS.：我希望有更多的文章来解释如何对 vanilla webcomponents 进行单元测试。我仍然想知道我是否在正确的方向上使用聚合物中的 wct 来测试香草网络组件。

于 2019-07-16T21:33:35.210 回答