使用selenium/chromedriver在码头上运行时，夜光测试失败

Question

我正在使用docker编写运行我的整个系统，并且我试图使用同一网络中的selenium/chrome服务执行我的端到端测试(用Nightwatch编写)。我的前端是VueJS，图像是从一个节点基映像构建的。我正在使用docker-compose exec前端npm运行test-selenium来运行测试，并获得以下输出：

> frontend@0.1.0 test-selenium
> nightwatch -c nightwatch-selenium.conf.js


[Login Test] Test Suite
──────────────────────────────────────────────
ℹ Connected to chrome on port 4444 (1494ms).
  Using: chrome (102.0.5005.61) on LINUX.   


  Running login:
───────────────────────────────────────────────────────────────────────────────────────────────────
  ℹ Loaded url http://frontend:8090/login in 2049ms
  NoSuchElementError: An error occurred while running .click() command on <Element [name=@loginBt]>: Timed out while waiting for element "#loginBt" with "css selector" to be present for 5000 milliseconds.
       at Object.login (/app/tests/loginTest.js:8:8)
  NoSuchElementError: An error occurred while running .setValue() command on <Element [name=@emailField]>: Timed out while waiting for element "input[name = "email"]" with "css selector" to be present for 5000 milliseconds.
       at Page.fillUpData (/app/tests/page-objects/loginPage.js:13:21)
       at Object.login (/app/tests/loginTest.js:9:8)
  NoSuchElementError: An error occurred while running .setValue() command on <Element [name=@passField]>: Timed out while waiting for element "input[name = "password"]" 
with "css selector" to be present for 5000 milliseconds.
       at Page.fillUpData (/app/tests/page-objects/loginPage.js:13:21)
       at Object.login (/app/tests/loginTest.js:10:8)
  NoSuchElementError: An error occurred while running .click() command on <Element [name=@submitBt]>: Timed out while waiting for element "button[name = "submit"]" with 
"css selector" to be present for 5000 milliseconds.
       at Object.login (/app/tests/loginTest.js:11:8)
  ✖ Testing if the URL contains '/cards' in 5000ms - expected "contains '/cards'" but got: "http://frontend:8090/login" (5143ms)
    at Object.login (/app/tests/loginTest.js:12:15)


FAILED: 1 assertions failed and  4 errors (28.22s)

在本地运行测试时，一切都正常。对于本地测试，我使用安装为dev依赖项的chrome驱动程序，使用http://localhost:8090/.访问前端。

这是我第一次在码头处理E2E测试，所以我不太清楚到底出了什么问题。任何帮助都是非常感谢的。请查找下面的源代码。如果我需要补充更多的信息，请告诉我。

• package.json

"scripts": {
   ...
    "test": "nightwatch",
    "test-selenium": "nightwatch -c nightwatch-selenium.conf.js",
   ...
  },

• docker-compose.yml

services:
  frontend:
    build:
      context: card-market-frontend/
      dockerfile: Dockerfile
    command: npm run serve
    working_dir: /app
    ports:
      - "8090:8090"

  chrome:
    image: selenium/standalone-chrome:latest
    hostname: chrome
    privileged: true
    shm_size: 2g  

当使用test-selenium命令运行测试时，我正在使用下面的nightwatch.conf：

const chromedriver = require("chromedriver");

require("dotenv").config();

module.exports = {
  src_folders: ["/tests"],
  page_objects_path: ["tests/page-objects"],

  test_workers: false,

  selenium: {
    start_process: false,

    cli_args: {
      "webdriver.chrome.driver": chromedriver.path,
    },
  },

  webdriver: {
    start_process: false,
  },

  test_settings: {
    default: {
      selenium_port: 4444,
      selenium_host: "chrome",

      screenshots: {
        enabled: true,
        path: "tests_output/",
        on_failure: true,
      },

      desiredCapabilities: {
        browserName: "chrome",
        chromeOptions: {
          w3c: false,
          args: ["--no-sandbox"],
        },
      },
    },
  },
};

我的页面对象loginPage.js

module.exports = {
  url: `http://frontend:8090/login`,
  elements: {
    logoutBt: "#logoutBt",
    loginBt: "#loginBt",
    emailField: 'input[name = "email"]',
    passField: 'input[name = "password"]',
    submitBt: 'button[name = "submit"]',
  },
  commands: [
    {
      fillUpData(selector, data) {
        return this.setValue(selector, data);
      },
    },
  ],
};

运行loginTest.js的测试

module.exports = {
  login(browser) {
    const page = browser.page.loginPage();
    const email = "coolEmail@gmail.com";
    const pass = "coolPass";
    page
      .navigate()
      .click("@loginBt")
      .fillUpData("@emailField", email)
      .fillUpData("@passField", pass)
      .click("@submitBt")
      .assert.urlContains("/cards");
  },
};

Answer 1

您的第一个错误是：

NoSuchElementError: An error occurred while running .click() command on <Element [name=@logoutBt]>: Timed out while waiting for element "#logoutBt" with "css selector" to be present for 5000 milliseconds.

这表示在搜索Logout按钮时引发了。

但是，按照loginTest.js中的测试步骤，理想情况下，您不应该在导航到页面后才找到Logout按钮：

.navigate()
.click("@logoutBt")

只有在登录后才能找到注销按钮。

解决方案

理想情况下，命令的顺序是：

page
  .navigate()
  .click("@loginBt")
  .fillUpData("@emailField", email)
  .fillUpData("@passField", pass)
  .click("@submitBt")
  .assert.urlContains("/cards");
  .click("@logoutBt")