Element not visible with button click in selenium chrome driver - selenium-webdriver

I'm trying to click the continue button after filling in the fields on this webpage. But an exception is thrown saying element is not visible even though I maximize the screen and you can clearly see the button.
I have tried the following even with waiting 10 seconds for the page:
driver.findElement(By.xpath("//*[#id=\"submitButton\"]/span")).click();
driver.findElement(By.cssSelector("#submitButton > span")).click();
driver.findElement(By.partialLinkText("Continue")).click();
driver.findElement(By.className("caret_rebrand")).click();
driver.findElement(By.name("submitButton")).click();
driver.findElement(By.xpath("//span[contains(#class,'red') and contains(text(), 'Continue')]")).click();
Here is the part of the html I am trying to access:
<button style="padding-left: 0px;" type=button" "id=submitButton" class = "nbutton" title = "Continue" onclick=_hblicnk('continue,'continue'); goFeaturePage('true');">
<span style = "padding-right: 12px;" class="red"
"Continue"
<img class="caret_rebrand">
</span>
I expect the continue button to be found and clicked. attached is the picture of the webpage
UPDATE: 8-3-19: I've tested the following pieces of code and it is able to find the element in all cases. But when adding the .click() function to any one of them, it causes a no such element exception.
driver.findElement(By.name("submitButton")).click();
driver.findElement(By.id("submitButton")).click();
driver.findElement(By.cssSelector("#submitButton")).click();
driver.findElement(By.xpath("//*[#id=\"submitButton\"]")).click();

My expectation is that you need to click the <button> element as this <span> might be not clickable at all. You can use i.e. title attribute to uniquely identify the element on the page
It's better to use Explicit Wait to ensure that the button is present and clickable as it might be the case it's not available in DOM right away. Check out How to use Selenium to test web applications using AJAX technology article for more details
Assuming all above I believe you should be able to use below code for clicking the button:
continue_button = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//button[#title='Continue']")))
continue_button.click()

Related

How to click on a deeply buried button in div classes via protractor. No id

I am trying to click a button that is buried in div classes in the code via protractor.
I am pioneering a protractor project for my work and have reached a point where I no longer know what to do. I have a button that is buried in div classes and is not allowing me to click. I have tried using mouseMove to get over to the coordinates of the button, I have tried using the className of the specific button, etc. The button does not have an id. The id is not the issue as I have tried clicking a different button, equally buried in divs, by it's id. I need to know how to get through the layers of divs in order to click the button because the rest of the tests will be dependent on it.
APPLICATION CODE:
::before
<dashboard-label>
<div class="att-topic-analysis-tabs">
<div class="att-button-group">
<button class="btn btn-default btn-lg att-close-topic ng-scope"
role="presentation" tabindex="-1"
ng-click="removeTopic(currentTopic.id)" translate>
Close Topic
</button>
</div>
</div>
PROTRACTOR TEST:
it('Closes Topic Successfully', function(){
//opens the first available topic
openTopic.click();
//checks that the URL contains 'topics' after 5 seconds
browser.wait(proExpect.urlContains('topics'), 5000);
var closeTopic = element(by.className('att-close-topic'));
//browser.wait(proExpect.elementToBeClickable(closeTopicButton), 5000);
console.log(closeTopic);
closeTopic.click();
browser.wait(proExpect.urlContains('home'), 5000);
});
As you can see, the Close Topic button is kind of buried in div classes and the standard click isn't working. Any info would be greatly appreciated
If the closeTopic locator is finding the element, but failing to click it, check to make sure there's only one matching element in the DOM, and that it's visible. My favorite way to check the DOM is just ctrl-F in Chrome inspector and paste the exact CSS that the test is using (.att-close-topic). And to check that what it's getting is visible, use
console.log(closeTopic.isDisplayed());
This can be a big gotcha in protractor, because it doesn't fail (only warns) when there are multiple matches on the page, and it defaults to the first match rather than the first visible match, which drives me nuts, because it's very rare that you want to do anything with a non-visible element on the page.
This will be partly opinion, but just to add a layer to the conversation...
Sometimes the solution to locating a troublesome element on the page is to go back to the developers and make the page more testable. I've seen testers spend hours or days crafting brilliant workarounds to access a stubborn element, and the end result was a fragile, complicated end-to-end test (and aren't they fragile enough already?).
Sometimes a 5-minute conversation with a developer can result in a quick change in the production code (e.g. add a unique ID) that avoids all that effort and yields a much better result, more stable, more simple. But this requires open conversation between the dev and test team, and a culture that values testing as a primary activity enough to make those testability changes to production code that is otherwise working just fine.
This is what you want to read to help you debug why your test doesn't work.
Also, you might want to start adopting await/async since the control flow will go away in the future.
http://www.protractortest.org/#/debugging
try this
var closebutton=element(by.css("[ng-click="removeTopic(currentTopic.id)"]"),
EC = protractor.ExpectedConditions;
Waits for the element to be clickable.checks for display and enable state of button
browser.wait(EC.elementToBeClickable(closebutton), 10000);
now use : closebutton.click();

webdriver warning the server did not provide any stacktrace information

I have written driver.findElement(By.id("kfiDocumentLink")).click(); code for clicking on the button 'KFI Document'.
Please find the HTML code.
<a class="button" id="kfiDocumentLink" href="/Quote/KFIDocument/The%20Co-operative%20Bank%20-%20Download%20Mortgage%20Illustration%20(PDF)%20160808104103" target="_blank">Download Mortgage Illustration (PDF)</a>
When I run the code, sometimes I am able to click on the button and sometimes I am unable to click the button.
Could someone assist on this please?
Actually some time when you goes to find element, It would not be present on the DOM at that time due to slow internet or other reason, that's why are sometime able to click and sometime not.
To overcome this issue you should try using WebDriverWait with ExpectedConditions.elementToBeClickable to wait before click on element until element visible on the DOM and clickable as below :-
WebDriverWait wait = new WebDriverWait(driver, 10);
el = wait.until(ExpectedConditions.elementToBeClickable(By.id("kfiDocumentLink")));
el.click();

Not able to click and element using Selenium

I am trying to automate 'Tableau' login screen and download reports flow. Everything works fine till I reach the 'Download' button. The first problem is I am NOT able to right click on the Download button and do an 'Inspect' in Chrome which is weird. I somehow am able to find the xpath by going through the whole page. When i try to click it I get "Caused by: org.openqa.selenium.NoSuchElementException: no such element: Unable to locate element: {"method":"xpath","selector":"/html/body/div[2]/div[2]/div/div[3]/div[4]/span[1]"}".
The code that I am using is mentioned below:
String xPath = "/html/body/div[2]/div[2]/div/div[3]/div[4]/span[1]";
(new WebDriverWait(driver, 20))
.until(ExpectedConditions.elementToBeClickable(By.xpath(xPath)));
driver.findElement(By.xpath(xPath)).click();
The page layout is like this from where I am picking the xpath
<div class="tabToolbarButton tab-widget" style="-webkit-user-select: none; -webkit-tap-highlight-color: transparent; width: 77.4px;">
<span class="tabToolbarButtonImg tab-icon-download"></span>
<span class="tabToolbarButtonText">Download</span></div>
<span class="tabToolbarButtonImg tab-icon-download"></span>
<span class="tabToolbarButtonText">Download</span>
</div>
Any help would be appreciated. What could be the reason for not able to 'Inspect'??
If you are not able to right click on the element, you can still right click anywhere on the page and select Inspect this element. You can then grab little binocular icon(tool tip message-select an element in the page to inspect it) and point it to the desired web element to check the xpath.
1st thing you need to check if you are writing xpath correctly. On a chrome you can do that without any plugin. On the developer window(same window which gets open when you select Inspect Element option), look for Console window and write your xpath as mentioned below and hit Enter.
$x("Write x path here")
for e.g. xpath for google search box
$x("//input[#id='lst-ib']")
I'm not sure why you writing absolute xpath. Its a bad practice. You can write x path for Download button in better way.
e.g.
(//span[#class='tabToolbarButtonText'])
I got the problem. So it seems the web page I was trying to automate has used frames. That is why even after providing the xpath the element was not getting clicked. I had to use 'switchTo.frame' in order to get the frame in focus and then I was able to click the element. Thanks for all the responses.
What I have still not understood is that why I was not able to inspect the element directly but that is a different question.

I am not able to click on button in protractor

Html code
<button type="button" ng-click="submitPosition($event, true);navigate($event,'/#/project')" class="btn btn-main" name="submit">CREATE POSITION AND AUTOSOURCE</button>
My code.
Two buttons have same class name so am using filter.
element.all(by.css('button.btn.btn-main')).filter(function(button,index){
return index == 1;
}).each(function(button){
button.click();
});
I am getting this error
UnknownError: unknown error: Element is not clickable at point (1049, 162). Other element would receive the click: <ul class="modal-breadcrumb list-unstyled block">...</ul>
(Session info: chrome=43.0.2357.132)
Please help me.
Based on the error, it looks like you've got a modal blocking your click. Not seeing the rest of the code, it's hard to say, but you'll need to get around that. That said, the overall issue could be your locator strategy. Using filter here is overboard, and perhaps trying to clicking the wrong thing?
I would try:
element(by.cssContainingText('button.btn.btn-main', 'CREATE POSITION AND AUTOSOURCE'));
or
$$('button.btn.btn-main').get(1); // assuming index 1 is the button you're after
or if it's the only submit:
$('button[name="submit"]');
This may result due to the following reason ,
The button you want to click on is at the bottom of the page(not visible on the page).
you have to scroll down a bit to expose the button in our browser.Then you can click on it.
You can use mouseMove() to scroll to element first:
browser.actions().mouseMove(btnSave).click();
or
use browser.executeScript() function to do the scrolling:
browser.executeScript('window.scrollTo(0,document.body.scrollHeight);');
you should give a specific id to your button and use the by id to click
element(by.id('buttonId')).click();
I'm not sure if the modal eventually goes away? or if you have to click on something else for the modal to go away but I've found using the expected conditions to be helpful
var button = element.all(by.css('button.btn.btn-main')).first();
var IsClickable = EC.elementToBeClickable(button);
browser.wait(IsClickable, 5000, "Failed to click the button").then(function() {
button.click();
});

Cannot find button element on form using Webdriver

I'm having trouble trying to click on on a button within a form.
I've tried xpath, cssselector, className, id, but still cannot find it.
Here's the HTML snippet for the button:
<input type="button" value="Continue" id="ni-reg-btn-register" class="btnNext ni-reg-btn-register">
I'm using WebDriver in Java
Getting this trace:
org.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
Command duration or timeout: 30.09 seconds
Frequency: 100%
Browser: Firefox
URL: https://subscription.thetimes.co.uk/webjourney/webj_capturecustomerdetails
I've tried each of the following lines of code one by one (but no luck):
driver.findElement(By.className("btnNext ni-reg-btn-register")).click();
driver.findElement(By.cssSelector("buttons#ni-reg-btn-register.btnNext ni-reg-btn-register")).click();
List<WebElement> buttonlist= driver.findElements(By.className("btnNext ni-reg-btn-register"));
driver.findElement(By.id("ni-reg-btn-register")).click();
driver.findElement(By.xpath("//*[#id="ni-reg-btn-register"]")).click();
I was able to click the Continue Button using the below xpath.
//input[#id='ni-reg-btn-register']
I would suggest trying a WebDriverWait call to wait for the element in question to exist on the page prior to interacting with it. The Java documentation can be found here. It appears that while you are using the correct locator and your page is working, there is a timing issue where Selenium is trying to access the element prior to it being loaded.
EDIT: I was unable to locate an element on the provided page with the supplied id. I assume I am missing a step, but I did a search on the HTML for that page and found nothing.
I dont find the above button on the page link you provided ..
better chk the page link and try to give some wait statement after page load ...
implicit wait would be better or simpli Thread.sleep(2000);

Resources