We Keep Coding

Selenium Webdriver, clicking a button not working

I am having two issues in clicking two buttons during my automation
First : A View button which have the following Details
<button class="veiw-btn" data-toggle="collapse" data-target=".toggle-content1" aria-expanded="false" aria-controls="toggle-content1" ng-click="gotoAnchor(flightResult.FlightId)">VIEW</button>
There are several VIEW buttons on the page but they are differentiated with the toggle-content (they have numbers 1,2,3,4) I just need to select the first one and click on it
Second :
After clicking the View i want to also click the Continue Button with the following code
<div class="text-center">
<button class="flight-book-btn" type="button" ng-click="select(false, flightResult);">
<span>Continue</span>
</button>
</div>
My Major issue is the First Code but if i can get help with both i will be glad . I have not been able to click on the First VIEW Button
i have tried some samples online but they have not worked for me
I expect to be able to click the VIEW and Continue Buttons
CODE:
driver.manage().timeouts().implicitlyWait(60, TimeUnit.SECONDS);
log.debug("Fastest Sort Available ");
log.debug("Now about to click VIEW Airline Details ");
// driver.findElement(By.xpath("//button[text()='VIEW' and #data-target='.toggle-content1' and #aria-controls='toggle-content1']")).click();;
driver.findElement(By.cssSelector("button[class=\"veiw-btn\"][data-target='.toggle-content1'']")).click();

Try using the css selector or Xpath
CSS:
driver.FindElement(By.CssSelector("button[class="veiw-btn"][data-target='.toggle-content1']").Click();
xpath:
driver.FindElement(By.XPath("//button[#class='veiw-btn'][#data-target='.toggle-content1']").Click();

You can use this xpath to click on VIEW button :
//button[text()='VIEW' and #data-target='.toggle-content1' and #aria-controls='toggle-content1']
For clicking on Continue button you can try with this xpath :
//span[text()='Continue']/parent::button[#class='flight-book-btn']

I have fixed this by using this
WebElement element= driver.findElement(By.xpath("//button[text()='VIEW' and #data-target='.toggle-content1' and #aria-controls='toggle-content1']"));
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);

Unable to locate and click checkbox ::before using Selenium Webdriver

I'm trying to click a checkbox but it's keep clicking the link 'terms and conditions'. Although my xpath (mentioned below) work on a minimized window but it's failing to click the checkbox when the window is maximized because the href (image) appears in the second line next to checkbox. Looking for some suggestions on clicking the checkbox widget on maximized window. I need to get a focus on it.
Interestingly, when i hover over the ::before (css selector) only than the widget gets highlighted.
<div class="checkbox u-mar-bot-5">
<div class="checkbox__container">
<input class="checkbox__input" type="checkbox" id="basket-contact-terms" required data-parsley-multiple="basket-contact-terms" style>
<label class="checkbox__label checkbox__label--has-link checkbox__label--small" for="basket-contact-terms" style>
::before
"I have read and agree to " <a class="text-link text-link--base text-link- small" href="/terms-conditions" target="_blank">Terms and Conditions</a>
</label>
</div>
</div>
image: Terms and Conditions
I tried a few options that keep failing to check the box and instead the link 'terms and conditions' gets the click. I must be missing something basic.
driver.findElement(By.xpath("//label[#for='basket-contact-terms']")).click();
driver.findElement(By.xpath("//label[contains(#class,'checkbox__label checkbox__label--has-link checkbox__label--small')]")).click();
I did looked around and found someone suggested to use this (below) so i tried but didn't work:
WebElement elem = driver.findElement(By.xpath("//div[contains(#class,'checkbox u-mar-bot-5')]"));
Actions action = new Actions(driver);
action.moveToElement(elem).click().build().perform();
Any suggestion would be appreciated.

Since you tried the ID of the INPUT and it threw an error that it wasn't visible, I would first try a wait to see if it will become visible. (I'm assuming it won't but it's worth a try first).
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("basket-contact-terms"))).click();
If that doesn't work, I would next try to click a different position on the element. By default, Selenium clicks on the center of the element. In your case, I think this is what's causing the issue. You can use Actions to click the upper left (1,1) of the element.
WebElement label = driver.findElement(By.xpath("//label[#for='basket-contact-terms']"));
new Actions(driver).moveToElement(label, 1, 1).click().perform();

You can try with
WebElement elem = driver.findElement(By.id("basket-contact-terms"))

Selenium Web driver: how do I click on image button?

Here is the image button source:
<img src="/NU/b-nb.gif" border="0" name="New Business" label="New Business" xpath=".">
I'm trying to click on the image button on IE using selenium webdriver but I'm unable to find the element.

You can select element by name or some other approach & simple call the click event using click() method.
WebElement myImgBtn= driver.findElement(By.name("New Business"));
myImgBtn.click();
As, you have this element in other html frame. So you have to switch the driver to that iframe before selection of element.
e.g.
driver.switchTo().frame(driver.findElement(By.xpath("//iframe[contains(#id,'your_iframe_id')]")));
WebElement myImgBtn= driver.findElement(By.name("New Business"));
myImgBtn.click();

driver.findElement(By.xpath("//img[#name='New Business']")).click();

Cannot click on input type = "radio" that is inside a HTML label?

I have a problem where I cannot click on the input type = "radio" using the id="same-supplier-no":
<label for="same-supplier-no" ng-class="{checked: !ctrl.energyModel.BillViewModel.SameSupplier}" class="">
<input type="radio" id="same-supplier-no" name="same-supplier" ng-model="ctrl.energyModel.BillViewModel.SameSupplier" ng-value="false" ng-change="ctrl.sameSupplierValueChanged(); ctrl.analyticsProvider.sendVirtualPageView('SameSupplierNo')" class="ng-pristine ng-untouched ng-valid" value="false">
<span></span>No
</label>
In Selenium when I do:
driver.findElement(By.id("same-supplier-no")).click();
it says that "element not visible". There are previous radio buttons in the HTML that have labels on it and they have ID's for the labels (this one does not).
I just refer to the label id and click that instead and it works. But this one doesn't have an ID for the label and I want to avoid xpath usage, however, if I have no choice, then I will just select via xpath/css.
I have also tried via locator name i.e. By.className("same-supplier"); and using a For loop and if statement to store the input type=radio element, still doesn't work.
Question is: why can I not click the input type = "radio", why is in not visible to Selenium? Is it because it is nested inside a Label? If so, does anyone know how I can click it using the id or just getting to the element?
Thank you.
Note: I am using Java 7 for Selenium.

From the chat conversation I could try some stuff on the website you are using. The radio never becomes visible. As a result of this it is impossible to use the click() method on it.
The label that contains this radio is visible however. This means you could just use click() on this label.
driver.findElement(By.cssSelector("label[for='same-supplier-no']")).click();
Or if you really want to find the element using the radio you could use xpath.
driver.findElement(By.xpath("//*[#id='same-supplier-no']/parent::label")).click();

use action to click on the lable and after that use:
Actions actions = new Actions(driver);
IWebElement menuHoverLink = driver.findElement(By.XPath("//label[#for='same-supplier-no']"));
actions.moveToElement(menuHoverLink);
actions.click();
actions.perform();
driver.findElement(By.id("same-supplier-no")).click();

After you click on "find postcode" button, add below two line of code -
WebDriverWait wait = new WebDriverWait(driver,10);
wait.until(ExpectedConditions.visibilityOf(driver.findElement(By.xpath(".//*[#id='same-supplier-question']/div/div/label[2]/span"))));
This is has worked at my end...
You can change the xpath from absolute to relative....

Insert a button into a div on a jsp using document ready

I have a layout.jsp that I am using to build a page using multiple other jsp's.
In my main content jsp pages I have a button or two. In the current version I am positioning the div with the buttons relatively.
I am switching the way the page is designed. I created a div in my layout page to place the buttons into. I gave it an appButtonDiv class.
The issue I am running into is I do not know how to create a button insert it into the div. I would like to do this on document ready.
Here is the div I want to put the button(s) into.
<div class="row-fluid verticalmenubottom">
<div class="span12 verticalMenuCell appButtonDiv"></div>
</div>
Below is a example button.
<button type="submit" id="searchButton" name="searchButton"
value='<spring:message code="Generic.Search"/>'/>
Search</button>
There are some cases where I will have multiple buttons.

I haven't JSP competence, however you are asking how to add content to an element on document ready.
Using JQuery, you can do this:
$(document).ready(init);
else without JQuery, you might use the onload event of your body element:
<body onload="init()">...</body>
Then declare this function in your script tag:
function init() {
//this executes on document ready
//create your elements
var externDiv = document.createElement('div');
var internDiv = document.createElement('div');
externDiv.className = 'row-fluid verticalmenubottom';
internDiv .className = 'span12 verticalMenuCell appButtonDiv';
externDiv.appendChild(internDiv);
//find your button and put the new elements in it (check that your jsp don't change the id client-side)
var btn = document.getElementById('searchButton');
btn.appendChild(externDiv);
}
That's it!

You mean u want to insert a button inside a button?
or create another button inside the div?
<div class="row-fluid verticalmenubottom">
<div id="button1" class="span12 verticalMenuCell appButtonDiv"></div>
<div id="button2" class="span12 verticalMenuCell appButtonDiv"></div>
</div>
or i miss something ## ?