我在尝试单击或提交使用 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()");
我不断收到与上述相同的错误,即我卡在登录页面上,无法继续前进。