Hopefully someone can help me, either by telling me it cant be done or pointing me in the right direction.
I am trying to use Watir Ruby written tests to check a CSS element is being applied to my page when a check box is checked.
I can check the checkbox attribute fine and see that it is checked, but a differnt test i have to perform is to check that the image has been highlighted after the checking the checkbox.
Currently i have not been able to find anything useful around after a couple of hours of searching. Has anyone come across a problem liek this you ahve had to overcome, and if so how did you go about it.
Thanks in advance
If you're using vanilla Watir (meaning IE browser on Windows) then it is also possible to get style of the element from win32ole object:
irb(main):001:0> require "watir"
=> true
irb(main):002:0> b = Watir::Browser.new
=> #<Watir::IE:0x4bce118 url="about:blank" title="">
irb(main):003:0> b.goto "google.com"
=> 2.298132
irb(main):004:0> i = b.image(:alt => "Google")
=> #<Watir::Image:0x433fa28 located=false how={:alt=>"Google"} what=nil>
irb(main):005:0> i.style
=> #<WIN32OLE:0x431ca90>
irb(main):008:0> i.style.paddingTop
=> "26px"
This #style method also returns computed style, e.g. styles from CSS and not just from style tag.
You can check out all the possible style ole methods from msdn at http://msdn.microsoft.com/en-us/library/ms535870(v=vs.85).aspx under styles properties.
How do you apply the CSS element to image after checking the checkbox? If you add the class attribute for highlighting, I guess checking class attribute is the simplest way.
for example
browser.image.class_name =~ /foobar/
If using style attribute, I think you might need to check HTML itself, like
browser.image.html =~ /style=\"?foobar\"?/
Related
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
Can anyone tell me how to detect -webkit-appearance, moz-apperance, or appearance using Modernizr?
I have custom selects, and checkboxes that use these and I need to ensure the additional styles are not applied on those browser that dont support these properties.
Thanks
Just use Modernizr.testProp() method:
Modernizr.testProp('webkitAppearance');
And with this check you can write your own Modernizr test using Modernizr.addTest():
Modernizr.addTest('webkit-appearance', function() {
return Modernizr.testProp('webkitAppearance');
});
I'm pretty certain that Modernizr doesn't include a detection routine for this feature yet -- it's just too new.
However, as it's a CSS property, you should be able to detect it fairly simply for yourself without needing to invoke modernizr.
This page details how to do a quick check to detect if a CSS property is available.
Simply check whether the property exists in the style property of any given DOM element. If the property is supported, it will be in the DOM, even if it isn't actually set to anything.
Hope that helps.
This is may be very noobish and a bit embarrassing but I am struggling to figure out how to make checkboxes 'checked' using CSS?
The case is that if a parent has a class setup (for example) I'd like to have all the checkboxes having setup as parent to be checked. I'm guessing this is not doable in pure CSS, correct? I don't mind using JS but am just very curious if I could toggle the state of the checkboxes along with that of their parent (by toggling the class).
Here's a fiddle to play around with.
A checkbox being "checked" is not a style. It's a state. CSS cannot control states. You can fake something by using background images of check marks and lists and what not, but that's not really what you're talking about.
The only way to change the state of a checkbox is serverside in the HTML or with Javascript.
EDIT
Here's a fiddle of that pseduo code. The things is, it's rather pointless.
It means you need to adding a CSS class to an element on the server that you want to jQuery to "check". If you're doing that, you might as well add the actually element attribute while you're at it.
http://jsfiddle.net/HnEgT/
So, it makes me wonder if I'm just miss-understanding what you're talking about. I'm starting to think that there's a client side script changing states and you're looking to monitor for that?
EDIT 2
Upon some reflection of the comments and some quick digging, if you want a JavaScript solution to checking a checkbox if there's some other JavaScript plugin that might change the an attribute value (something that doesn't have an event trigger), the only solution would be to do a simple "timeout" loop that continuously checks a group of elements for a given class and updates them.
All you'd have to do then is set how often you want this timeout to fire. In a sense, it's a form of "long polling" but without actually going out to the server for data updates. It's all client side. Which, I suppose, is what "timeout" is called. =P
Here's a tutorial I found on the subject:
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
I'll see if I can whip up a jQuery sample.
UPDATE
Here's a jsfiddle of a timeout listener to check for CSS classes being added to a checkbox and setting their state to "checked".
http://jsfiddle.net/HnEgT/5/
I added a second function to randomly add a "checked" class to a checkbox ever couple of seconds.
I hope that helps!
Not possible in pure css.
However, you could have a jQuery event which is attached to all elements of a class, thereby triggering the check or uncheck based on class assignments.
Perhaps like this:
function toggleCheck(className){
$("."+className).each( function() {
$(this).toggleClass("checkedOn");
});
$(".checkedOn").each( function() {
$(this).checked = "checked";
});
}
I'm currently writing a web app that updates it's pages CSS based on user input. I've got it all working fine, but I'm having trouble getting my automated tests to confirm that the CSS has actually been updated.
Basically, I just want to verify that the contents of a <style> tag in the document <head> have been updated to a certain value. I'm using capybara (with the selenium driver) for my tests, with this code:
styles = page.all('style')
styles.length.should == 1
styles[0].text.should == style
It all works as expected, until the final line, which fails as it seems that styles[0].text is always "". I've also tried .value but it is always nil. I'm pretty sure the CSS is actually being updated, as I can see the changes in the firefox window that the tests are running in.
So, is there a way to get at the contents of the <style> tag using capybara?
It seems Capybara (with Selenium at least, I didn't try any other drivers) won't show you this, I presume because the style content is wrapped in an HTML comment so it gets ignored e.g.:
<STYLE type="text/css">
<!--
.newfont { color:red; font-style:italic }
-->
</STYLE>
You do, however, have access to the page's source with page.source, so you can use that to get at the style content. The source is just a big string, so one way to dig into it is to parse it with Nokogiri (which is required by Capybara so you'll have it already):
page = Nokogiri::HTML.parse(page.source)
page.css('style').first.text
# => "\n<!--\n.newfont { color:red; font-style:italic }\n-->\n"
If you're asserting against customisable styles, and you're using Selenium anyway, an alternative solution could involve using Javascript to determine the calculated style of an element, there seems to be no shortage of information on doing this. You could use Capybara's page.evaluate_script method to invoke a piece of Javascript that would tell you what a particular element actually looks like, and that may well be more robust than comparing the CSS text (e.g. if it gets minified by the app).
page.should have_css ".selector", :text => "Some Text"
page.should have_css ".selector", :value => "Some Value"
page.should have_css ".selector", :count => 1
Or
find('.selector').value
find('.selector:nth-child(1)').value
There are a couple ways to about what you are trying. I'd take a closer look at the documentation.
Also, one thing to note, if you are trying to access these changes after a javascript event, you'll need to run this in Selenium (or equivalent). Or you could try to use Jasmine.js for this as well.
I want to apply custom css to my calendar control. I have applied the same at corresponding locations for e.g.
e.Cell.CssClass = "highlight";
clndrEvt.TodayDayStyle.CssClass = "currentDay";
clndrEvt.OtherMonthDayStyle.CssClass = "OOB";
clndrEvt.NextPrevStyle.CssClass = "dayTitle";
However when i render the control, my styles are not reflected.
When i check 'View Source' it applies my classes (italic) and ALSO applies in-line styles (underlined) along with it, which overwrites my styles. For example,
class="highlight" align="center" style="color:White;background-color:Silver;width:14%"
Can anyone help me out with this? To be very specific how to remove those in-line styles (by using which properties) from the HTML by settings properties of calendar control.
I have tried few, but that did not work.
e.Cell.Attributes.CssStyle.Clear();
e.Cell.Attributes.Add("Style", string.Empty);
clndrEvt.Style.Clear(); // clndrEvt is my calendar control
I had a similar issue recently with a project I had inherited. I worked out that the styling was being added via the Master.skin in app_themes. Might be worth a check there.