Selenium: Wait For a Hidden Input Field to Appear - selenium

Here is a snippet of Selenium test code that runs okay:
it("The 1st shop should have 10 items", function() {
return browser
.url(cdpUrl)
.waitForVisible('#slider0')
.elements('#slider0 img').then(function(res) {
expect(res.value.length).to.equal(10);
});
});
But what I want to do instead is replace the waitForVisible line with one that looks for a hidden input field with id='documentReady' that is dynamically inserted into the page when the page preparation is complete.
I've tried numerous things but none of them work. Any ideas?

Related

Selenium - How to Wait?

I need to be able to wait for one of multiple things that could happen to a page after a certain action is taken. Examples of these things are: URL changes, a certain title is set, certain content on the page appears, etc.
This explains how to wait - https://github.com/facebook/php-webdriver/wiki/HowTo-Wait. However, I need to be able to wait for multiple things at the same time. I want the waiting to stop once one of the conditions occur.
Is there a way to "or" during a wait (e.g. wait for URL to change OR title contains "foo" OR "bar" appears on the page, etc.)?
In the same link you posted, look for the "Custom conditions" section, i.e.:
$driver->wait()->until(
function () use ($driver) {
$elements = $driver->findElements(WebDriverBy::cssSelector('li.foo'));
return count($elements) > 5;
},
'Error locating more than five elements'
);
Note the use of findElements in the code example. When nothing is found, an empty array will be returned. If only one of three elements must be visible, you do something like:
$driver->wait()->until(
function () use ($driver) {
$elements1 = $driver->findElements(WebDriverBy::cssSelector('li.foo1'));
$elements2 = $driver->findElements(WebDriverBy::cssSelector('li.foo2'));
$elements3 = $driver->findElements(WebDriverBy::cssSelector('li.foo3'));
return count($elements1) + count($elements2) + count($elements3) > 0;
},
'Error locating at least one of the elements'
);

How can I provide a tag that would run my cucumber background once for all scenarios?

I am using cucumber-js
I have some slides within the same url. For my feature, I want to provide the tester a way to open a url, and then have multiple scenarios on the same url:
The problem with the solution below is that the url re-opens for every scenario, reseting the slide to the start. I can never test each slide step as a separate scenario.
Any help or suggestion appreciated: example:
Feature: Valuation slide user journey - pre-reqisite As a developer I want to open the url /valuation/
Background:
Given I open the url "/valuation/"
Scenario: Test valuation slide button
Given the element "valuationIntro" is visible
When I click on the button "valuationIntro.cta"
Then I expect that element "valuationSlide1" becomes visible
Scenario: Test valuation autocomplete
Given the element "valuationSlide1.cta" has the class "invalid"
When I set "jk5 7kj" to the inputfield "valuationSlide1.autocomplete"
Then I expect that element "valuationSlide1.cta" does not have the class "invalid"
I understand I can use tags, but not entirely sure how I can use a tag to run a background once.
var executed = false;
var myStepDefinitionsWrapper = function () {
this.Given(/^I open the url "([^"]*)"$/, function (url) {
if (!executed)
// do some work with url
executed = true;
});
};
module.exports = myStepDefinitionsWrapper;
Just a simplification to make a point. I would use singletons with state.

Setting input focus after tab is clicked

When a page has a search box with multiple tabs, one of the tabs is always selected; either the default tab is selected or the user has changed the tab. In either case the search input box of the selected tab should always have the keyboard focus so the user can just start typing their keywords.
Example: search box on http://www.lib.umd.edu/
Do you know how I could get the focus to be in the input box when a different tab is clicked? I got it to work on the first tab, but when I click another tab, the focus is lost.
The script I am using:
<script type="text/javascript" language="JavaScript">
document.forms[''].elements[''].focus();
</script>
$(document).ready(function () {
setTimeout(function () {
// focus on the txtenclude text area first visible and enabled input field or textarea
$(":input:visible:enabled").each(function () {
if ($(this).is('textarea')) {
$(this).focus();
return false;
}
});
}, 1000);
Your code snippet
To set the focus on a certain element you have to specify which element should receive the focus. In your snippet this specification is missing:
document.forms[''].elements[''].focus();
If you want to you can use this line: document.getElementById("DuringSearch").focus();
DuringSearch is the id of the input element that should receive the focus <input id="DuringSearch" type="text">
The problem that needs to be solved is to change the id based on the tab that was clicked.
There are several ways to achieve this. In a previous post is used an attribte named data-tab.
Example to wire up tabs and focus to input
To attach an event handler to a click on a tab you can do the follwing (using jQuery) on document.ready:
// add event handler for click on tab
$("#tabs li").click(function () {
loadTabs(this);
setFocusOnInput(this);
return false;
});
If you click on a tab the attached event fires and executes the 2 functions: loadTabs and setFocusOnInput.
To set the focus you need to know the id of that input-box. In my exmaple i am using an attribute data-tab
<li data-tab="Before">
Before
</li>
In my example i use the following function:
function setFocusOnInput(_this){
var tab = $(_this).attr("data-tab");
var searchId = tab + "Search"
console.log("_this:", _this);
document.getElementById(searchId).focus();
}
See more explanations on my previous post.
Could you elaborate what you want to know. Do you want to know how to wire it up in general or how to do it in a specific case?

Chrome WebDriver hungs when currently selected frame closed

I am working on creation of automated test for some Web Application. This application is very complex. In fact it is text editor for specific content. As a part of functionality it has some pop-up frames. You may open this pop-up? make some changes and save them - closing current frame. May problem is in that fact, that close button situated inside frame will be eliminating. And this force Chrome WebDriver to hung. My first try was like this:
driver.findElement(By.xpath("//input[#id='insert']")).click();
driver.switchTo().defaultContent();
But it hungs on first line after executinh click command as this command close frame.
Then I change to this(I have JQuery on the page):
driver.executeScript("$(\"input#insert\").click()");
driver.switchTo().defaultContent();
But this leads to same result.
Then I use this solution:
driver.executeScript("setTimeout(function(){$(\"input#insert\").click()}, 10)");
driver.switchTo().defaultContent();
And it hungs on second line. Only this solution works:
driver.executeScript("setTimeout(function(){$(\"input#insert\").click()}, 100)");
driver.switchTo().defaultContent();
but only if you don't take into account, that it is unstable - some timing issue may occur.
So may question is there more cleaner and more stable way for switch out from closed frame?
P.S.: executeScript - self defined function to decrease amount of code. It simply executer some js on page.
Update:
I realized I was wrong. This problem is not for all iframes. It's occur when tinyMCE popup used. Situation is exactly like in this topic. So it's doubtful I will find answer here, but who knows. Solution described above will help, but only for very short amount of time, meaning that after several seconds pass chromedriver will hangs on next command.
This is how i would do it in Ruby, hopefully you can change it for java
$driver.find_element(:xpath, "//input[#id='insert']").click
$wait.until {$driver.window_handles.size < 2} #this will "explicitly wait" for the window to close
handles = $driver.window_handles #get available window handles
$driver.switch_to.window(handles[0]) #navigate to default in this case the First window handle
hope this helps
Problem was in this line of tinyMCEPopup code:
DOM.setAttrib(id + '_ifr', 'src', 'javascript:""'); // Prevent leak
Executing this script on page fix hang problem(but possibly creates leaks :) ):
(function() {
var domVar;
if (window.tinymce && window.tinymce.DOM) {
domVar = window.tinymce.DOM
}
else if (window.tinyMCE && window.tinyMCE.DOM) {
domVar = window.tinyMCE.DOM
}
else {
return;
}
var tempVar = domVar.setAttrib;console.log(123)
domVar.setAttrib = function(id, attr, val) {
if (attr == 'src' && typeof(val)== 'string' &&(val + "").trim().match(/javascript\s*:\s*("\s*"|'\s*')/)) {
console.log("Cool");
return;
}
else {
tempVar.apply(this, arguments);
}
}
}());
Bug and solution also described here
Note. Code above should be added to parent frame, not into popup frame.

Clearing input textbox using FuncUnit

I am writing FuncUnit for my application. I am browsing the application in Google Chrome. I have a textbox which is initially hidden. I need to make it visible and then clear the text already present in that textbox. I have the following code which makes the box visible but fails to clear the text in it.
S('#search').visible().clearText();
Can anyone tell what is wrong here?
Try to clear the textbox by typing - Ctrl+A and Delete.
var input = S('input.my-input');
input.type('[ctrl]a[ctrl-up][delete]', function() {
// Continue in test case after the text has been removed
});
Your statement is not accurate. visible() does not turn things visible. It is a wait function which waits for the source element to become visible before proceeding to the next action.
koalix's key sequence works. With the type() command you might need to first click into the text input before clearing it.
Try:
S('#search').visible().click().type('[ctrl]a[ctrl-up][delete]');
You could also try empty quotes <" ">
var input = S('input.my-input');
input.type('', function() {
// remove existing text
});
I don't know if you're still waiting for an answer.
I think you're not using visible() in the correct way.
In FuncUnit (see docs here), among other things, you can distinguish between "actions" and "waits". visible() is a wait, and should be used to wait for an element to become visible, like this:
S('#el').visible( function() {
// do something when element with id="el" becomes visible
});