I'm doing functional testing using CasperJS's test class, and can't seem to select elements by their text values. My goal is to check that a class of div is visible, and then check it has the value I expect.
I've tried using the CSS3 selectors mentioned on CaspersJS' selector page, but must be doing something wrong. None of the following work for me (all enclosed in ""):
div#myid[text()='sometext']
div#myid[text='sometext']
div#myid[text=sometext]
div#myid:contains('sometext')
div#myid:contains(sometext)
Any pointers as to how I can select a specific element based on it's text value?
Try:
var x = require('casper').selectXPath;
this.test.assertExists(x('//*[#id="myid"][text()="sometext"]'), 'the element exists');
Thanks for the comments above - I ended up going with using jQuery (as it was being loaded on the client) through evaluate() calls in the CasperJS tests.
Related
I'm using Rails 5.1.1, RSpec 3.5.0 & Capybara 2.7.1.
I want to have a test that checks for a navbar on the home page, according to some documents that I've found I should be using have_css for this. The example given is:
have_css("input#movie_title")
My understanding is that this would look for an input tag with an id of movie_title. Is that correct?
I'm trying this in my code:
have_css("div.navbar-default")
I get this error, however:
Failure/Error: expect(page).to have_css("div.navbar-default") expected to find css "div.navbar-default" but there were no matches
Why is this not working? I have a div with the class 'navbar-default', so this should work as far as I can work out.
Edit / Solved:
I realised my mistake. I have to expect statements, the navbar-default class is in a nav tag, not a div tag. The 2nd statement is in a div tag but wasn't running due to the error on the first one.
I've fixed it now, all working
The have_css matcher is applied to the parent container instead of the actual element. Is there a parent container?
Try something like this:
# Find the parent
parent = page.find('div#nav')
# Check for the nested div
expect(parent).to have_css(".navbar-default")
I have this strange code:
<h1>Firmware 0.6 <span="postdate">April 02, 2015</span>
</h1>
How can I change only this certain span that has ="postdate" in it with CSS?
The problem occurs in a widespread template in the posttime of for example: http://luebeck.freifunk.net/2015/01/07/announce-0.6.html
the main source in github is corrected already, But I wonder how to fix such with only access to the CSS file.
That's not valid HTML.
If you validate it using an HTML validator, you will receive the following:
an attribute specification must start with a name or name token
An attribute name (and some attribute values) must start with one of a restricted set of characters. This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value looks like the start of a new attribute) or have used an attribute that is not defined (usually a typo in a common attribute name).
For what it's worth, you can technically select it by escaping the =/" characters.
Unfortunately, this will also select all succeeding elements due to the syntax error in the HTML.
span\=\"postdate\" {
color: red;
}
<span>Other span</span>
<span="postdate">April 02, 2015</span>
<p>Some paragraph</p>
<span>Everything appearing after the invalid span will get selected due to the syntax error!</span>
Ignoring the weirdness and considering it just another span there's usually another way to select it as it has a unique place in the DOM (though what that is may be unpredictable with dynamically created content such as you get in a CMS).
I'm guessing you've thought to target any ancestor items with an id attribute or determine if there's a way to target it through ancestors without affecting sibling spans or spans that sit within a similar structure elsewhere? Basically - does it sit within a unique structure in some way?
If not then you could also try to target it through span:nth-child(5). There's also a fist-child and last-child. This may help uniquely target it within the overall structure. https://css-tricks.com/useful-nth-child-recipies/
You could also try to enter an inline script in the html view of the wysiwyg (a bad CMS may allow this!) which will allow you to check the content of spans and do something to if it matches (like add a class or id for a styling hook).
I have kendo grid in application,and its have filterable true option.my requirment is when we apply the filtering to columns,column header font style will be changed to italic..How to do it?If any one have idea about this please tell me..
I personally have not used kendo grid, but I quickly tried the demo here,
and found that it adds "k-state-active" class to the <a> element inside the <th> element.
However, the header text is not inside the <a> element. What you need is a parent selector which current CSS does not support.
So as far as i know, this is NOT possible in pure CSS
You need some javascript. Here is a possible solution using jQuery:
// adding click event handler to the "Filter" and "Clear" buttons
$('form.k-filter-menu .k-button').click(function(e) {
setTimeout(function() {
// first make all headers normal, then make the filtered column header italic
$('th.k-header.k-filterable').css('font-style', 'normal').filter(
':has(> .k-grid-filter.k-state-active)').css('font-style', 'italic');
}, 100);
})
setTimeout is used because "k-state-active" class is added only after the data is filtered. Again, I'm not familiar with kendo grid, so I do not know if there is a way to provide a callback method to the filter. You may want to investigate on that because that 100 ms delay may not be long enough if you have a huge dataset.
My apologies for jQuery specific solution. Ah... I can't do anything without jQuery. Shame.
But hopefully this was helpful to you! Let me know if you need any further help.
This is possible with one CSS line:
.k-filterable a.k-grid-filter.k-state-active ~ .k-link {font-style:italic;}
No need to use java script.
I'm using watir-webdriver with chrome to automate my tests and I'm kinda stuck now.
I have a form inside a facebox(defunkt.io/facebox). There are many checkboxes inside this form as you can see:
irb(main):113:0> b.checkboxes.size
=> 122
My problem is when i try to set one of this checkboxes I get the following error:
irb(main):111:0> b.checkbox(:id => 'week_0').set 1
Selenium::WebDriver::Error::UnknownError: Element is not clickable at point (-99999800, 242.5)
Backtrace:
0x8088d3a
0x8076225
0x807c718
0x807c9e7
0x807f6b7
0x808009d
0x8067c5c
0x8074931
0x8059fda
0x80d1d4d
0x80d3773
0x80d3aa3
start_thread [0x5e9e99]
0x10b973e
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/response.rb:50:in `assert_ok'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/response.rb:15:in `initialize'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/http/common.rb:58:in `new'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/http/common.rb:58:in `create_response'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/http/default.rb:64:in `request'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/http/common.rb:39:in `call'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/bridge.rb:450:in `raw_execute'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/bridge.rb:428:in `execute'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/remote/bridge.rb:264:in `clickElement'
from /usr/local/lib/ruby/gems/1.9.1/gems/selenium-webdriver-2.14.0/lib/selenium/webdriver/common/element.rb:34:in `click'
from /usr/local/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.3.9/lib/watir-webdriver/elements/checkbox.rb:25:in `set'
from (irb):111
from /usr/local/bin/irb:12:in `<main>'
What should I do to handle facebox with watir-webdriver on chrome?
EDIT:
I found the problem with a TIP from Chuck (look elements attribute at inspect element tool).
So I noticed the checkboxes had -999999px left position.
Solution:
browser.execute_script("$('[type=checkbox]').removeClass('ui-helper-hidden-accessible')")
(since this was the class that was causing the left negative shift)
I found the problem with a TIP from Chuck (look elements attribute at inspect element tool). So I noticed the checkboxes had -999999px left position.
Solution:
browser.execute_script("$('[type=checkbox]').removeClass('ui-helper-hidden-accessible')")
(since this was the class that was causing the left negative shift)
The error makes me think the thing may not be visible or active somehow. Is the script actually displaying the lightbox at the time it tries to interact with it? Do you need to insert a brief pause or wait for the checkbox to get rendered and the javascript code that 'pops up' the lightbox to finish it's thing?
If it is not visible then I could see it producing an error of the sort you are getting.
Likewise if the script is just going a little too quick, that could be the issue also.
Use the developer tools (in chrome you can right click an element and choose 'inspect element') and look at the properties (specifically position) of the element in question, and the elements further up the 'tree' (as it were) that contain it.
You might be able to brute force around this by changing the class, or altering the CSS for the class to temporarily to 'relocate' the object such that Watir believes it is visible. I've had to do something similar for stuff that used the hover state to hide or show menus, where for whatever reason 'onmouseover' events were not good enough for the browser to apply a different css psuedoclass. If you are already using jquery there's some pretty simple functions that can be called to do that sort of thing. (one of your devs might be able to help you out with it) You can use .execute_script to invoke code like that if it's needed.
Try this. It will move the element into view using Javascript. Worked for me.
module Watir
class Element
def move_into_view
browser.execute_script(%Q[
var element = arguments[0];
element.style.position = 'absolute';
element.style.left = '10px';
element.style.top = '10px';
return true;],
self )
end
end
end
<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div>
With respect to selenium, in the above, what is
attribute
element
value
text
label
I keep getting confused between these terms and the explaination of the above example would help a lot.
Thanks.
Element: <div></div>. This is the basic block, everything else is added to the element.
Attribute: id, class, style. Attributes are any extra information added inside the element's tag.
Value: None in your example. Value is a special attribute that form elements have. A browser usually uses the value attribute to transmit data when the form is submitted (think of a username-password form)
Text: Search myTwonky. This is anything wrapped by the element tags.
Label: None in your example. A label is a special element that usually goes before an input element (again in a form). This is usually something like "Password:" which as the name suggests, is a label for an input field in a form