I need to change text color in CSS. How do i target text Website like in this example:
<input type="checkbox" id="website" name="website" value="website">Website<br>
What is the proper way, to wrap it in something like <div> ?
Wrapping in the <label></label> does the trick.
Related
I am using nightwatch.js to perform end-to-end testing and have to use a roundabout method for a waitForElementVisible command to work as expected. For example, my code below:
browser.waitForElementVisible(".profile label[for='Admin']") // works
browser.waitForElementVisible(".profile label[for='Admin'] input[id='Admin']") // breaks
For further clarification, I am testing to see if a radio button is visible. The radio button's DOM elements is as such:
<div class='profile'>
<div class='roleSelector'>
<label for="Admin">
<input type="radio" id="Admin" class="Admin">
</label>
</div>
</div>
As far as I know, there is no such specific case.
Did you try using '.profile input[id='Admin']' ?
Hope that serves your purpose at hand.
For some reason the line keeps breaking when typing in an input type=text element. I thought this behavior is default to textarea elements not input type=text elements. How can I prevent this?
That's how a textarea works. Try using the input tag with type text:
<input type="text" name="sampletext" value="try this, this text will not have line breaks">
Demo: http://jsfiddle.net/9nqorarw/
You should use a textare instead of an input field. It is easier then.
<textarea type="text" name="sampletext" value="try this, this text will not have line breaks"></textarea>
The capybara choose method works well for a radio button which has the label tag next to it with the required text, like below:
<input id="rGEQr-real" type="radio" name="_pgcr6g7j"/>
<label id="rGEQr-cnt" class="z-radio-content" for="rGEQr-real">Web IDE Support</label>
page.choose('Web IDE Support') works fine for this.
But for something like this:
<form action="">
<input type="radio" value="male" name="sex"/>
MALE
<br/>
<input type="radio" value="female" name="sex"/>
FEMALE
</form>
which doesnt have label tag, the simple choose fails to set radio button.
How can we achieve this in Capybara??
If you need to choose a radio button by anything other than its name, id or label text, you will need to:
Find the radio button, typically with find and a CSS or XPath.
Call the set method
In this case, you will need to use XPath since CSS-selectors do not support locating by text. The XPath will need to check that the following sibling text node is the specified text. This can be done with:
# Select MALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "MALE"]]').set(true)
# Select FEMALE
page.find(:xpath, '//input[following-sibling::text()[1][normalize-space(.) = "FEMALE"]]').set(true)
I have a search bar on my web page. What do I use as the src="" if I want to make the link jump to the input section of the search bar, with the cursor blinking there too. I'm using twitter bootstrap 3 if that helps.
Try to use html label for your input.
<input type='text' id='search'/>
<label for='search'>Search</label>
Assuming that you have an input with an id of search like this:
<input type="text" placeholder="Search" class="form-control" id="search">
Then you can do this:
go to search
The preferred way to do this would be with an event handler (versus inline as I've shown above) for maintainability. That would look something like this if you're using jQuery (which I'm just assuming you are since you've marked this with a Twitter Bootstrap tag):
go to search
$(document).ready(function() {
$('.searchlink').on('click', function() {
$('#search').focus();
}):
});
I have a problem while escaping the special character -. Here is the HTML code snippet:
<input class="form-control dob ng-pristine ng-valid" type="text" readonly="readonly" data-date-format="mm/dd/yy" ng-model="pollObj.poll_question.start_time" datepicker=""></input>
<span></span>
<input class="form-control dob ng-pristine ng-valid" type="text" readonly="readonly" data-date-format="mm/dd/yy" ng-model="pollObj.poll_question.end_time" datepicker=""></input>
I am using watir web driver to select a date from the date picker.
So if I have to click the first input from the above html snippet, the only thing that can be distinguished is the value for ng-model. Hence I thought of writing like this:
browser.input(:ng-model="pollObj.poll_question.start_time").when_present.click
In the above code, I need to escape - in ng-model. Using backslash doesnot help.
Can someone please help?
The ng-model is not a standard attribute, so Watir-Webdriver does not directly support the attribute as a locator.
One option is to use a css-selector:
browser.element(:css=> 'input[ng-model="pollObj.poll_question.start_time"]').when_present.click
Or you could use xpath:
browser.input(:xpath => './/input[#ng-model="pollObj.poll_question.start_time"]').when_present.click