Having trouble with clicking or submitting a button in my test script using selenium-webdriverjs.
Using the following NPM modules:
- selenium-webdriver
- mocha
- chai
- chai-as-promised
After filling out the form, I am unable to click the button to proceed to the dashboard. The button is highlighted but not responding to mouse actions.
Here are screenshots taken manually during the test:
after both email and password sections filled, clicked remember me button
mouse hover over sign-in button
In the last image, I'm trying to click the sign-in button while hovering over it due to intended CSS effects but unable to advance to the next page.
Full test script:
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('<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6d19081e192d08150c001d0108430e0200">[email protected]</a>');
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');
});
});
});
Error received when running test script:
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
The error confirms the issue of being unable to click the sign-in button properly and progress to the next page.
Login form structure (stripped of styling and 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>
Tried other methods like using click function on findElement such as:
this.driver.findElement({
css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).click();
Also attempted sendKeys on findElement with these lines:
this.driver.findElement({
css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.ENTER);
and
this.driver.findElement({
css: '#app > div > div > div > div > form > div:nth-child(5) > button'
}).sendKeys(driver.Key.RETURN);
While in chrome dev tools, was able to click the button using vanilla JS with the line:
document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()
However, executeScript in testing script did not work:
this.driver.executeScript("document.querySelector('#app > div > div > div > div > form > div:nth-child(5) > button').click()");
Continuously getting stuck on the sign in page without being able to proceed further.