How to verify the color of the element in selenium RC - selenium

Need to verify the color of the element when hovering on web elemet where the style information available in the CSS file
Sample:
<a href="foo.com" class="color-set" />
color-set {
color: #047fe9;
}
So how can i get the information from CSS file via Selenium RC

You can try to asser this:
assertTrue(Selenium.IsElementPresent("css=color-set[color:#047fe9]"));
Let me know if this helped you.

You may use execute_script to get the css. If you have jQuery:
color = driver.execute_script("jQuery('.color-set').css('background-color')")
assert_it...
If not jQuery:
color = driver.execute_script("elm = document.getElementsByClassName('color-set'); return window.getDefaultComputedStyle(elm).getPropertyValue('background-color');")
assert_it...

Related

Protractor Automation: Selection of element

I'm trying to automate selection of some products...Here's a screenshot
The user clicks on the top row of 'base' colours and then selects the desired colour from the resulting pallet beneath.
I am able to select a base colour without issue.
element(by.xpath('html/body/main-app/kf-sidebar-app/div[1]/app-container/div/dashboard/div/div/visualise/open-interface/div/div/div[2]/div[2]/digitalbridge-category-list/div/digitalbridge-category-view[2]/div/div[1]/div/div[2]')).click();
...selecting the desired colour is altogether much more maddening!!! The closest I've got has resulted in a "Element not visible" message....tried adding in 'waits' but no difference.
This code..
var EC = protractor.ExpectedConditions;
var paintSelected = element(by.xpath('.//div[#id="2386"]'));
browser.wait(EC.visibilityOf(paintSelected), 7000);
paintSelected.click();
..produces line-after-line of..
[11:27:22] W/element - more than one element found for locator By(xpath, .//div[#id="2386"]) - the first result will be used
This keeps running until the 7000ms timeout is reached. I've tried using 'first' but it's not 'recognised'....also tried [0] but again, not recognised.
Here's the line from Console...
<div _ngcontent-c63="" class="item circle" id="2386" style="background-image: url("https://shortbite.s3-eu-west-1.amazonaws.com:443/category/raw/941027c0-f6e6-434c-9ab9-66f9918c33e6.png?Signature=Zbffcvf73Nv9g2v9G3SmcYn6h24%3D&Expires=1510141234&AWSAccessKeyId=AKIAIUUATNKB37DELIXQ");"> </div>
Please try and save my sanity! Thanks
David
Try putting your selector into the console i.e $x(".//div[#id='2386']").
Just to see if you really have two elements with the same Id
Also do a find elements and debug the collection of elements.
One thing I have done with my extended framework is implemented a highlight element functionality.
IJavaScriptExecutor js = Driver as IJavaScriptExecutor;
js.ExecuteScript("arguments[0].setAttribute(arguments[1], arguments[2])", ReferenceElement, "style",
"border: 2px solid red; border-style: dashed;");
if you have id you can check all elements available with that id in chrome or firefox console like that:
$$('#2386')
$$ will return all, one $ will return the first one.
because if you have more than 1 element with the same locator, protractor will get the first one.
If there is no way to give you elements different locators you can get it by index.
for example in you code first loacte all elements and assign it to varible:
var allColors = $$('#2386'); // same as element.all(by.id('2386'))
or get them by index
var firstColor = $$('#2386').get(0); // or $$('#2386').first();
var secondColor = $$('#2386').get(1); // or $$('#2386').first();
Use firepath and find out the absolute xpath .
Then add some wait and try to click on the element using absolute xpath

click only visible element selenium webdriverjs

I have multiple div like below
<div class="one">send Message</div>
<div class="one">send Message</div>
<div class="one">send Message</div>
I have a web page where there is send Message buttons like above, in which only one button is visible at a time.Other two buttons are hidden via some javascript codes.So for example if 2nd button is visible , I should be able to click only that element.But in my selenium code , its trying to click first hidden div and its failing
driver.findElements(by.className(".one")).then((els) => {
var element = els[index];
element.click();
});
So basically I wanna convert below javascript code to Selenium nodejs code,If some one guide me that will be helpful
var all = document.getElementsByTagName("*");
for (var i = 0, max = all.length; i < max; i++) {
if (isHidden(all[i]))
// hidden
else
// visible
}
function isHidden(el) {
var style = window.getComputedStyle(el);
return ((style.display === 'none') || (style.visibility === 'hidden'))
}
Do you want to click the button ( basically a div as far as code is concerned ) which is visible ?
If that is your main agenda, then the code you've written will fail to find desired element. As you are selecting the element by it's classname not its visibility.
Your code will find all the matched class element. As it's a basic element selector and all your buttons have the same class, so they are basically rendered on the page.
Approach 1
driver.findElements(by.className(".one")).then((els) => {
for(var key in els){
var element = els[key];
if(element.isDisplayed()){ //if visible element
element.click();
}
}
});
The Key here is to check if the element you are trying to click is visible on the page.
Approach 2
By giving a unique class to the target button. Some class for eg 'clickable' or 'active'. So it will be a more optimized solution to select the target element using the Css selector. The Key here is to give uniqueness to your target element to be more identifiable.
Usually many Java Scripts are run in the node Js without the convert.
Have you try it in the node Js without converting ???
** Remember to import selenium

Selenium webdriver for handling dynamic ckeditors

I am currently doing scraping using selenium in java for a website. Most of the pages I scrap contains ckeditor. I am currently using javascript to get the data from ckeditor using javascriptexecutor executescript method
CKEDITOR.instances['locator name/id/class'].getData()
but the problem here is the locator is changing dynamically I also found a way to get the name of the locator by getAttribute(name) method and used it in javascript but the problem here is some ckeditors use id , some use names or classes and mostly all the attributes(id,class,name) are used in html
Sample html
<textarea id="cm_ckeditor name="profile_description" style="width: 100%; height: 200px; visibility: hidden; display: none;"></textarea>
here if i use CKEDITOR.instances['profile_description'].getData() it is failing
It returns the data correctly when I use CKEDITOR.instances['cm_ckeditor'].getData() similarly there are scenarios in which the name works and id fails
From your question i guess you want to get data from ckeditor whose locator is changing dynamically
var myinstances = [];
for(var i in CKEDITOR.instances) {
CKEDITOR.instances[i];
CKEDITOR.instances[i].name;
CKEDITOR.instances[i].value;
CKEDITOR.instances[i].updateElement();
myinstances[CKEDITOR.instances[i].name] = CKEDITOR.instances[i].getData();
return myinstances[CKEDITOR.instances[i].name];
}
You can use this javascript inside javascript executor
JavaScriptExecutor js=(JavaScriptExecutor) driver;
String ckeditor_data=(String) js.executeScript("function getdata(){var myinstances = []; for(var i in CKEDITOR.instances) { CKEDITOR.instances[i]; CKEDITOR.instances[i].name; CKEDITOR.instances[i].value;CKEDITOR.instances[i].updateElement(); myinstances[CKEDITOR.instances[i].name] = CKEDITOR.instances[i].getData(); return myinstances[CKEDITOR.instances[i].name];}}if ( CKEDITOR.status == 'loaded' ) {getdata();}");
System.out.println(ckeditor_data);
Hope this helps you...kindly get back if you have any queries

Access Elements of a DOJO DIV

I have two Hyper Links on to a DOJO DIv
var create = dojo.create("div",{
id:"create_links",
className:"iconRow1",
innerHTML:"<a class='popupLink' href='javascript:openCreateDialog()'>Create </a> <span>|</span><a href='javascript:openUploadDialog()'>Batch </a>"
},dojo.query(".ui-jqgrid-titlebar")[0]);
On click of the Batch Hyperlink , i have a function
function openUploadDialog()
{
// Here i want to disable the Create Hyper Link tried this way
dojo.byId('create_links')[1].disabled=true; // Not working
}
See whether i can answer your question.
HTML Part:
<div id="create_links">
g
h
</div>
JS Part:
dojo.addOnLoad(function() {
var a = dojo.query("#create_links a")[1];
dojo.connect(a,'click',function(e){
console.log(e.preventDefault())
})
})
#Kiran, you are treating the return of dojo.byId('create_links') like an array when that statement will return to you a node on the dom.
Also, hyperlinks don't support a disabled attribute to prevent them from being actionable. You could probably create a click handler that returns false to accomplish this type of functionality, or like #rajkamal mentioned, calling e.preventDefault(). #rajkamal also provides a good solution to selection the link properly.

How to prevent CKEditor insertHtml to wrap element within <p> in webkit browsers?

Im trying to build a front-end page to allow my users to build smarty templates with ckeditor wysiwyg editor.
Im using the insertHtml function to add a button with special attributes (needed to parse it into an smarty variable in the back-end):
// initialize ckeditor
$('textarea.editor').ckeditor({
contentsCss: '/css/test.css'
});
// get ckeditor instance
ckeditorInstance = $('textarea.editor').ckeditorGet();
// Use some elements (outside the textarea) to add buttons/tokens
// to wysiwyg textarea
$("a.tinymce.tinymce-insert-var").click(function(){
ckeditorInstance.insertHtml(
'<input type="button" readonly="readonly" var="{$user->name}" '
+ 'class="placeholder" value="User Name" />'
);
});
This works fine on Firefox, IE8 and opera, but with Chrome/Chromium/Safari the button is inserted between a <p> element.
Is there a way to avoid this, or a callback that i can use to remove the paragraph?
I had this problem as well. This is how I did it...
var editor = $('textarea[name=content]').ckeditorGet();
var element = CKEDITOR.dom.element.createFromHtml( '<p>I am a new paragraph</p>' );
editor.insertElement( element );
Looks like you're using jQuery also... why don't you force the inclusion of the p tag within CKEditor's .insertHtml function, then follow it up with jQuery's .unwrap to always remove the p tags?
in the main ckeditor config-file there is an option to disable automatic <p> inserts.
try to change the value of CKConfig.EnterMode and CKConfig.ShiftEnterMode for example to 'br'.
Felix