1

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

我使用以下 NPM 模块:

  • 硒网络驱动程序
  • 摩卡
  • 柴如承诺

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

如果有帮助,这里有一些屏幕截图(我在测试期间手动拍摄了它们):

填写电子邮件和密码部分后,单击记住我按钮

鼠标悬停在登录按钮上

在最后一张图片上,我想单击登录按钮,由于显示预期的 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 部分使用 click 函数,例如:

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()");

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

4

1 回答 1

0

在查找某些元素和期望时,我可以通过添加睡眠功能来等待页面完全加载,从而使测试通过:

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');
        });
    });
});
于 2015-11-30T15:34:19.533 回答