How to locate an element in a ExtJS pop window - extjs

The system under test uses the ExtJS Framework to create dynamic pages.
The scenario is when a user clicks a button on the main browser page a pop window appears, I want to enter text in a textfield on this child window.
The only element I have located was the outer frame, I then tried to use this to locate textfield I wanted, but it failed.
Element Code
input type="text" size="16" autocomplete="off" id="name" name="name" class="x- form-text x-form-field x-form-invalid x-form-focus" style="width: 233px;"
I have tried the code below:
WebElement parentObj = getDriver().findElement(
By.cssSelector("#parentObj "));
WebElement newObj = parentObj.findElement(
By.xpath("//input[#id='name']"));
newObj.click();
newObj.sendKeys("Text to enter");
Can anyone help map elements in child extJS screens?
Thanks!

Maybe you should stick to CSS selectors as much as you can:
parentObj.findElement(By.cssSelector('input[name="name"]'));

If your popup window is present inside an iframe, you need to switch to that iframe first.
use the below code to switch to iframe, then you can use your existing selector.
var iframe = driver.findElement(By.TagName("iframe"));
driver.SwitchTo().Frame(iframe);
WebElement parentObj = driver.findElement(By.cssSelector("#parentObj "));
WebElement newObj = parentObj.findElement(By.xpath("//input[#id='name']"));
newObj.click();
newObj.sendKeys("Text to enter");

Related

Knock out js selenium web driver accept text input

I have a text box and button where I used knock out js binding as follows
<textarea id="txtSite" cols="40" rows="5" data-bind="value: cellSite" data-required-msg="required" required="required" class="k-valid"></textarea>
<button id="btnSubmit" value="Submit" data-bind="click: SubmitCell">Submit</button>
I am trying to automate using selenium by entering some required text in to textbox and submit but it is always firing an validation even though the value is present. How to make the button understand the value is entered in to textbox
driver = new EdgeDriver(#"C:\Tools\EdgeDriver");
driver.Url = "myurl";
driver.Manage().Window.Maximize();
Thread.Sleep(3000);
Helper.SendKeys(driver, By.Id("txtSite"), "xyz");
WebElement submitBtn = (WebElement)driver.FindElement(By.Id("btnSubmit"));
Helper.JavaScriptClick(driver, submitBtn);
I keep on getting alert asking to enter value in textbox field is there a way to handle this
OK here is what I found and it works as expected
Helper.SendKeys(driver, By.Id("txtSite"), "test");
Thread.Sleep(2000);
IJavaScriptExecutor jse = (IJavaScriptExecutor)driver;
IWebElement webElement = driver.FindElement(By.Id("txtSite"));
jse.ExecuteScript("$(arguments[0]).change();", webElement);
Can't test with Selenium but I'd recommend trying the textInput binding, Unlike the value binding, textInput provides instant updates from the DOM.
Looks like you're bumping that change event manually, which is equivalent to clicking out of the input (triggering change event) as you would as a user - to click the submit button.
https://knockoutjs.com/documentation/textinput-binding.html

Selenium-Java : Unable to click on an a date picker

I am trying to click on a date picker text box so that a calendar pops up where I can choose the date.
I am able to identify the element since it has easy accessible "id" attribute.
Manually clicking on the textbox, results in the calendar pop being displayed.
However, I am not able to click on the date picker using native Selenium click commands/ Javascript/ Jquery clicks.
Below is the HTML code :
<input class="ng-touched ng-dirty ng-valid" formcontrolname="effectiveDate" id="date_start" name="date_start" placeholder="dd/mm/yyyy" readonly="" type="text" ng-reflect-name="effectiveDate" autocomplete="off" value="22/09/2017" ng-reflect-model="22/09/2017">
Any reason why such a behavior? In what instances can we expect the Selenium native commands/ JS/ Jquery command to fail?
Using JavascriptExecutor You can enter date..
((JavascriptExecutor) wd).executeScript(
"document.getElementsByClassName('ng-touched ng-dirty ng-valid')[0].setAttribute('value', '2017-10-21')");
As per code this is written in angularjs so selenium driver is not able to locate such type of elements.Try to use cssSelector which is the best approach to locate angular based elements you can use By.cssSelector("input [id=date_start]").Don't forget to use proper wait before locating element.
You can try any of the following approaches:
#1
WebElement datePicker = driver.findElement(By.id("date_start"));
WebDriverWait wait = new WebDriverWait(driver,20);
wait.until(ExpectedConditions.visibilityOf(datePicker));
wait.until(ExpectedConditions.elementToBeClickable(datePicker));
datePicker.click();
#2
Actions act = new Actions(driver);
act.moveToElement(datePicker).click().build().perform();
#3
JavascriptExecutor js= (JavascriptExecutor ) driver;
js.executeScript("arguments[0].click‌​();",datePicker);
I think you will have to take coordinates of text box and width and height of the textbox and try to click on centre of the calendar sign present in textbox...

How do i select an element from a google drop down in selenium?

I have a field where it picks the location from a dropdown which is from google dropdown and not a native dropdown. So how can i click on that element in dropdown using selenium.
The results are show in an HTML div. The only reason why you are not able to find this div in HTML is because it appears somewhere near the bottom of the HTML and it is fragile enough to get dismissed with a click anywhere.
Coming to the code, your search results are generated inside individual divs with id="pac-item". So you have to just find them and click which ever item you want. Please don't forget to mark the answer
WebDriver driver = new ChromeDriver();
driver.get("http://www.nobroker.in/");
driver.findElement(By.id("locationGoogle")).sendKeys("n");
Thread.sleep(4000);
List<WebElement> elements = driver.findElements(By.className("pac-item"));
for(WebElement element : elements)
{
System.out.println(element.getAttribute("innerHTML"));
if(element.getAttribute("innerHTML").contains("Sopara"))
{
element.click();
}
}
Of course you will update the code to make it more efficient.

Upload file using arrow mark in webdriver

I have to upload an excel file in the application.For that, I need to click on one arrow mark (i.e;browse button)which will open up the popup for the user to choose the file from local drives.Below is the code displayed when I did inspect element on the arrow mark.
" ".
Also, the path which will display after choosing the file will be greyed out before user selects the file. This will be enabled only when the user chooses some file from the local.
I was trying below code but it did not work. I think send keys is wrong option as the text path is greyed out.
Help me on this.
WebElement El = driver.findElement(By.id("'uploadInp'"));
driver.findElement(By.id("uploadInp")).click();
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Arrow HTML code:-
<input id="file1" type="file" value="" style="background-color: red;opacity:0;filter:alpha(opacity=0);cursor: pointer; padding-top:3px;width:25px;" name="file">
You do not need to click on browser button or open any pop-up. sendkeys will going to dump your path in HTML DOM for you
So don't click on browser button while use the same button element to perform sendkeys like below:-
WebElement El = driver.findElement(By.id("'uploadInp'"));
El.sendKeys("D:\\NTN 4\\Demo\\BulkCart_Template.xlsx");
Now you need to click on element which is going to start your upload. As you didn't mention and it's unclear according to your question that which element going to upload your file. Just find that element and click on it normally.
Hope it will help you :)

strange Selenium2 No Such Element error

I have this HTML code.
`<div> <i class="icon-plus icon-white"></i>
<span>
<input type="file" multiple="multiple" name="uploadFile" value="Attach2" id="1309261001000145" style="visibility:hidden;position:absolute;top:0;left:0"> <input type="button" onclick="fireFileButton('1309261001000145')" value="Attach" name="input" class="btn_grn btn_sm">
</span>
</div>`
the div is in a normal nested divs. The second is the displayed 'attach file', once clicked, the "fireFileButton" function will click the first form(which is hidden on top left 0,0 position). then a pop up window appear as the type is 'file' to select file to upload and an ajax to upload.
I'm to use Selenium2 to simulate the file upload process.
I use the following codes:
WebElement attach = (new WebDriverWait(driver, 15)).until(ExpectedConditions.presenceOfElementLocated(By.cssSelector("//input[name^='input']")));
attach.click();
WebElement upload = (new WebDriverWait(driver, 15)).until(ExpectedConditions.presenceOfElementLocated(By.id("1309261001000145")));
upload.sendKeys("C:\\Users\\Public\\Pictures\\Sample Pictures\\Desert.jpg");
I also tried directly use sendKeys Function on first element. But have the error of NO SUCH ELEMENT both for first and second . I have used By.id,name,cssSelector,xpath but to no avail.
the elements can be selected using javascript.
Any Suggestion is much appreciated.
By.cssSelector("//input[name^='input']")
Selectors should not contain //,so replace the above with :
By.cssSelector("input[name='input']")
You can refer this to know more about Selectors.
First check : ID tag.
It seems that ID for the input buttons are dynamic. So we cant access through the ID's.
Second check : NAME tag.
We can use, since it has a name for it.
WebElement attach = driver.findElement(By.Name("input"));
attach.click();
If it is not clicking, use Actions.
Actions action = new Actions(driver);
action.moveToElement(attach).click().perform();
You cannot pass the values directly using sendkeys for file upload.
Check this page for my solution in order to access with file upload : How to handle Windows file browse window using selenium webdriver

Resources