无法使用 selenium webdriver js 单击或提交按钮

Question

我在尝试单击或提交测试脚本上的按钮时遇到问题我运行使用 selenium-webdriverjs。

我使用以下 NPM 模块：

selenium-webdriver
摩卡咖啡
柴
柴如约

填写表格后，我无法单击按钮进入仪表板。我突出显示了该按钮，但它不会通过鼠标操作点击。

以下是一些屏幕截图，如果它们有帮助（我在测试期间手动拍摄）：

after both email and password sections are filled, clicked remember me button

mouse hovering over sign in button

在最后一张图片上，我想点击登录按钮，由于显示了预期的 css 效果，应该将鼠标悬停在它上面，然后以某种方式前进到下一页。

这是我的完整测试脚本：

var driver = require('selenium-webdriver'),
      chai = require('chai'),
    expect = chai.expect;

    chai.use(require('chai-as-promised'));

describe('Webdriver - Admin Page Tests - ', function() {

    beforeEach(function() {
        this.timeout(10000);
        this.driver = new driver.Builder().withCapabilities(driver.Capabilities.firefox()).build();
        return this.driver.get('https://admin.example.us/en-US/sign-in');
    });

    afterEach(function() {
        return this.driver.quit();
    });

    describe('Login verification -', function() {

    it('filling in credentials and accessing the portal', function () {
            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(2) > input'
            }).sendKeys('test@example.com');

            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(3) > input'
            }).sendKeys('example');

            this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(4) > input[type="checkbox"]'
            }).click();

            var formButton = this.driver.findElement({
                css: '#app > div > div > div > div > form > div:nth-child(5) > button'
            });

            this.driver.actions()
                .mouseMove(formButton)
                .click()
                .perform();

            return expect(this.driver.getCurrentUrl()).to.eventually.equal('https://admin.example.us/en-US/dashboard');
        });
    });
});

这是我在运行我的测试脚本时得到的错误：

1) Webdriver PC6 - Admin Page Tests -  Login verification - filling in credentials and accessing the portal:

      AssertionError: expected 'https://admin.example.us/en-US/sign-in' to equal 'https://admin.example.us/en-US/dashboard'
      + expected - actual

      -https://admin.example.us/en-US/sign-in
      +https://admin.example.us/en-US/dashboard

以上错误基本上证实了我无法正确点击登录按钮并前进到下一页的问题。

这是登录表单的样子（我从中删除了样式和 react-ids）：

<div>
  <h2>
    <span>Sign In</span>
    <span></span>
    <button type="button">
      <div>
        <span class="material-icons">help</span>
        <span>help</span>
      </div>
    </button>
  </h2>
  <form name="auth">
    <div class="Form-errorSummary">
      <ul></ul>
    </div>
    <div >
      <label for="mui-id-1">E-mail</label>
      <input required="" name="email" value="" type="text" id="mui-id-1">
      <hr><hr>
    </div>
    <div>
      <label for="mui-id-2">Password</label>
      <input name="password" required="" type="password" id="mui-id-2">
      <hr><hr>
    </div>
    <div>
      <input type="checkbox" name="remember">
      <div>
        <div>
        </div>
        <div>
          <div>
            <svg viewBox="0 0 24 24">
              <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
            </svg>
            <svg viewBox="0 0 24 24">
              <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z">
              </path>
            </svg>
          </div>
          <div>
          </div>
          <div>
          </div>
        </div>
        <label for="mui-id-48">Remember me</label>
        <div></div>
      </div>
    </div>
    <div>
      <button tabindex="0" type="submit">
        <div>
          <div>
            <span>Sign In</span>
          </div>
        </div>
      </button>
    </div>
  </form>
</div>

我尝试了其他方法，例如在 findElement 部分使用点击功能，例如：

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).click();

但是没用。使用这些行在 findElement 上使用 sendKeys 也不行：

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.ENTER);

或

this.driver.findElement({
  css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.RETURN);

当我在 chrome 的实例中使表单处于相同状态时，我可以使用以下行在 chrome 开发工具中使用 vanilla JS 轻松单击按钮：

document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()

但是当我尝试在我的测试脚本中使用 executeScript 时它不起作用:

this.driver.executeScript("document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()");

我不断收到与上述相同的错误，我卡在登录页面无法前进。

Answer 1

我能够通过添加一个睡眠函数来让测试通过，以便在查找某些元素和期望时等待页面完全加载：

this.driver.sleep(250)

我搞砸了时间，似乎 250 毫秒是我的目的所需的最小量，而不会使测试太长。

这是在我的代码中实现后的样子：

var driver = require('selenium-webdriver'),
      chai = require('chai'),
    expect = chai.expect;

    chai.use(require('chai-as-promised'));

describe('Webdriver - Admin Page Tests - ', function() {

    beforeEach(function() {
        this.timeout(10000);
        this.driver = new driver.Builder().withCapabilities(driver.Capabilities.firefox()).build();
        return this.driver.get('https://admin.example.us/en-US/sign-in');
    });

    afterEach(function() {
        return this.driver.quit();
    });

    describe('Login verification -', function() {

    it('filling in credentials and accessing the portal', function () {
        this.driver.sleep(250);

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(2) > input'
        }).sendKeys('test@example.com');

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(3) > input'
        }).sendKeys('example');

        this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(4) > input[type="checkbox"]'
        }).click();

        var formButton = this.driver.findElement({
            css: '#app > div > div > div > div > form > div:nth-child(5) > button'
        });

        this.driver.actions()
            .mouseMove(formButton)
            .click()
            .perform();

        this.driver.sleep(250);

        return expect(this.driver.getCurrentUrl()).to.eventually.equal('https://admin.example.us/en-US/dashboard');
        });
    });
});

无法使用 selenium webdriver js 单击或提交按钮

Unable to click or submit button using selenium webdriver js

javascript

selenium

testing

selenium-webdriver

webdriverjs