Manual test conversion to Selenium RC - selenium

There is manual Test case. We need to check the following.
Action
Check Promo Links.
Expected Results
Up to four links are displayed at the bottom of the app.
The links are divided by bars "|"
HTML Code ..
< html>
< div class="xxx-module-content">
< div class="xxx-content-block">
< div style="float: left; margin: 0pt 10px 15px 0pt; padding: 0px;"> <a from="hp_xxx" href="" >< img alt="South Miami" style="border: 0px none;" src="" title="South Miami" height="97" width="130" >< /a> </ div>< !-- BR -->< img src="" title="xxx Weather" height="16" width="125" >< br>< !-- BR -->< br>< !-- BR -->< a title="South Miami" href="" from="hp_xxx" >South Miami< /a>< br>< !-- BR -->Photo shot from Key Biscayne looking at Miami< br>By: Jimperdue21< br>< div style="clear: both; width: 100%; margin-bottom: 15px;">< a title="Submit Photo" from="hp_xxx" href="" >Submit Your Photo< /a> | < a title="Submit Video" from="hp_xxx" href="" >Submit Your Video< /a>< /div>
< /div>
< /div>
</html>
Please suggest what logic should be used here through JAVA+selenium RC.
Thanks a lot.

you can do this in number of ways. [ you did not give enough info.]
do you want to check the no. of Links ? or the links with particular Text ?
according to my understanding, you just wanted to count whether minimum of 4 links displayed at the bottom or not(text doesn't matter)
you should not depend on "|" devider. this comes under styling/formatting (if you want do the testing based on "|" character, you can do. but it is not usual)
you should find out
a) are all the links you want to check have ant Id's / names declared
: if so you can look for it straight. if not,
b) all of the links have the same parent with ID or Name or Any Particular Tag: if so,
make use of
String numberOfLinks = selenium.getEval("var parent = window.getElementsById('parent tag Id');parent.getElementsByTagName('a').length");// gives no.of links in that particular parent (usually a tage) element.
selenium.getEval("window.getElementsByTagName('parent tag name');") //use this also same as above.
another approach :
1) for(String link : selenium.getAllLinks() ) { //returns all the links on the current page
//here you could do according to your app. requirement. ex...
}
---if you want to check the links(not the number of links), better use that with Text as you know that text.
selenium.isElementPresent() or selenium.isTextPresent();
above you can use Locator either ID if not "link=text"
i hope one of these will help you . if not post your code (HTML)

Use isElementPresent with appropriate locators on all four links.

Related

Materialize- Changing the default color of input fields

I'm new to Materialize and Angular. I have the exact same question as the question in this thread Change the default color of materialize.css input fields. I have attached screenshot
However, the solutions do not answer the question. I implemented this code in styles.css:
input:focus {
border-bottom: 1px solid #005DAB !important;
box-shadow: 0 1px 0 0 #005DAB;
}
label:active {
color: #005DAB;
}
Here's what I'm seeing:
What I'm seeing is the bottom border changes to blue (which is what I wanted). However, the label changes to blue temporarily (I'm assuming while it's active) and then it goes back to teal.
How do I make the selected label remain blue (#005DAB).
Hey the problem here is that the default CSS rules of materialize outweigh the custom rule you have defined.
You can read more about this here :
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
In short the most specific rule overwrites the other so in order to make your change appear you need to make your rule more specific.
There's multiple ways of going about this like using the id in the selector or adding !important to your rule.
However these methods are not recommended, you can rewrite the original CSS rule or add a custom class to add weight to your selector
<div class="input-field col s12 label-color-alternate">
<input id="password" type="password" class="validate">
<label for="password" class="">Password</label>
</div>
For example I added a class "label-color-alternate" to the outer div, if we add this class to our selector it'll give us the necessary specificity.
div.row > div.input-field.label-color-alternate > input+label.active {
color: #005DAB;
}
You can of course experiment with the best way to write your selector and to which elements you want to add custom classes.
I hope this helps !
set this in your external css:
input[type=text]:not(.browser-default):focus:not([readonly]) {
border-bottom: 2px solid var(--yourcolor);
box-shadow: 0 0 0 0 var(--yourcolor);
}

Can I get specific "dl" i.e. at First or Second index out of many identified by a CSS Selector in my App

I'm trying to automate a functionality using selenium in my Application Chrome browser. It's an SVG graph based page and shows details upon mouse over it. And this is identifiable with a CSS selector which is returning more than one matching elements(i.e. 6-7 dl , these dls has few child tags then internally containing the values I need to verify -as attached), now my need to select them one by one at a time and verify text of them(which displayed on mouse over).
I got to know on google how to read nth-child from dl but not getting a way to select particular dl at first place.
For example-
my selector is: .d3-tip.n>dl
if I use -.d3-tip.n>dl>dt:nth-child(odd): its giving me all the attributes of dt.. ie 6 values but I nedd values only from fst dl.
Similarly.d3-tip.n>dl>dd:nth-child(even) returning the 6 values of respected dds..
In Actual my app has only one dl (on UI) but don't know why it displaying 6 in DOM...
Plz refer attachment and HTML for a clear understanding of DOM
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<div class="d3-tip n" style="position: absolute; top: 44.5px; opacity: 0; pointer-events: none; box-sizing: border-box; left: 515px;">
<dl style="width:335px">
<dt>Space Name:</dt>
<dd>Space</dd>
<dt>Property Type:</dt>
<dd>Office</dd>
<dt>Quoted Area:</dt>
<dd>444 sf</dd>
<dt>Space Usage:</dt>
<dd>Business Park,Commercial School</dd>
<dt>Space Status:</dt>
<dd>For Lease</dd>
<dt>Possession Status:</dt>
<dd>Vacant</dd>
</dl>
<span class="d3-tip__pin"/>
</div>
<--! and so on up to 6 blocks of dl
nth-child is to find the nth-child of any immediate parent element. In your HTML DOM, dd is single child element of each div.d3-tip element. The repetitive child is actually your div.d3tip for it immediate parent element
So your selector has to be written as below to get the first set of dd,
div.d3-tip:nth-child(1)>dl>dd
Getting the second selector also works. This is most important while writing css selector. The second nth has to work. :).
Ok, so I am not sure which of the elements you want...
So... here is a snip that should give you help.
A) with hovering.
B) with looping through the elements.
C) Bonus learn about contains() functionality of XPath...
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.action_chains import ActionChains
url = "http://your_url"
path_to_chromedriver = "C:\path_to_chromedriver"
chrome_options = Options()
#chrome_options.add_argument("--headless")
chrome_options.add_argument("--start-maximized")
browser = webdriver.Chrome(executable_path=path_to_chromedriver,
chrome_options=chrome_options)
browser.get(url)
# list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dt")
list_of_dt_elements_to_hover = browser.find_elements_by_xpath("//div[class='d3-tip n']//dl/dt")
list_of_dd_elements_to_hover = browser.find_elements_by_xpath("//div[contains(#class,'d3-tip')]//dl/dd")
hover = ActionChains(browser).move_to_element(list_of_dt_elements_to_hover[0])
hover.perform()
for dd_ele in list_of_dt_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
for dd_ele in list_of_dd_elements_to_hover:
hover = ActionChains(browser).move_to_element(dd_ele)
hover.perform()
print(dd_ele.text)
I hope you find this helpful!

element not visible: Element is not currently visible and may not be manipulated - Selenium webdriver

Following is the html
<div id="form1:customertype" class="ui-selectonemenu ui-widget ui-state-default ui-corner-all ui-state-hover" style="width: 165px;">
<div class="ui-helper-hidden-accessible">
<select id="form1:customertype_input" name="form1:customertype_input" tabindex="-1">
<option value="S">Staff</option>
<option value="C">Customer</option>
<option value="N">New To Bank</option></select></div>
<div class="ui-helper-hidden-accessible"><input id="form1:customertype_focus" name="form1:customertype_focus" type="text" readonly="readonly"></div>
<label id="form1:customertype_label" class="ui-selectonemenu-label ui-inputfield ui-corner-all" style="width: 149px;">Staff</label>
<div class="ui-selectonemenu-trigger ui-state-default ui-corner-right ui-state-hover"><span class="ui-icon ui-icon-triangle-1-s ui-c"></span></div></div>
The stylesheet of class="ui-helper-hidden-accessible" is
ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 0px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 0px;
}
Following is my code
WebElement customerType = driver.findElement(By.id("form1:customertype_input"));
Select select = new Select(customerType);
select.selectByVisibleText("New To Bank");
When I try to select "New to Bank" from the dropdown I get exception
element not visible: Element is not currently visible and may not be manipulated - Selenium webdriver
I have tried WebDriverWait technique but of no use, any ideas ?
I don't believe the text for that option is actually visible before you attempt to select it. Try selecting by value instead.
WebElement customerType = driver.findElement(By.id("form1:customertype_input"));
Select select = new Select(customerType);
select.selectByValue("N");
You may need to actually click the selector before being able to select an option, though.
WebElement customerType = driver.findElement(By.id("form1:customertype_input"));
new WebDriverWait(driver, 15).until(
ExpectedConditions.elementToBeClickable(customerType));
customerType.click();
Select select = new Select(customerType);
select.selectByValue("N");
try performing click on customerType before you create object of Select
Well, I found a work around to solve my problem but I am not happy with this. anyways what I did is focused on the div element that controls the dropdown by clicking it and and then sending down arrows keys twice followed by enter key. This selects my desired option. I used the following method
driver.switchTo().activeElement()
I also had the same problem and after hours I realized the browser was trying to click in a element before the page load.
So I create a sleep to solved the problem:
sleep(1)
P.S. - This is a solution that I really don't like.
I'm just pointing you the reason for that.
The best you can do is to check the page that you have the problem and try to optimize the load time.
I encounter the same problem. I have tried many methods.
Finally, the following python code solved the error.
I use javascript code to make the element visible before selecting the option.
css = 'select#state' # css selector of the element
js = """const data_options = Array.from(document.querySelectorAll('{css}'));
data_options.forEach(a=>{{a.style='display:block;';}});""".format(css=css)
self.driver.execute_script(js)
Maybe it's helpful for you!

Putting a block level <span> element inside a <p> element

I know that <p> is to be used specifically with inline elements. But what if you change an inline element like <span> into a block-level element using { display:block } and contain it within a <p>?
ie.
<html>
<head>
<style>
p {
background: red;
height: 100px;
width: 100px;
}
p span {
display: block;
background: blue;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<p>
<span>I am a pizza</span>
</p>
</body>
</html>
Is that just wrong in every sense of the word? I know it is not common (ie. most would question why I didn't just use a div) but it's a hypothetical situation. It passes validation tests, but is it sloppy as all heck/bad practice? Would you scoff if you read that code?
A span element is always a text/inline/phrase element in HTML, and the HTML syntax rules that restrict p element content to such elements relate to HTML only. So they are not affected by CSS settings that may make a span a block element in the CSS (rendering) sense.
In CSS, you can assign any defined value to the display property, no matter what the element is like. CSS is ignorant of the meanings of elements as defined in HTML or other markup language specifications.
Thus, there is no formal objection.
Whether it is good style, or otherwise acceptable, is more complicated. There does not seem to be any statement on this in specifications, but it is reasonable to say that you should not change basic rendering features elements in vain. For example, in normal conditions, you should not use span and then say display: block in CSS, when there is the more logical approach of using div. One reason to this principle is that it keeps your document in a better shape in non-CSS rendering situations or when all or some of your style sheet is not applied.
On the other hand, you would not change display in vain if you have a text paragraph and you wish to render part of its content as a block, e.g. as a centered or indented line, possibly with a background color that stretches through the available width. You cannot use div inside p, so the more natural markup is not available.
Since the example is not a real one, it is impossible to say whether it is OK to deploy this approach in your case.
It's HTML5 valid and it's not that bad in certain situations e.g.
<p>
This is some text <span class="highlight">I am a pizza</span> and this is some more text...
</p>
.highlight {
background: yellow;
}

CSS: Div Background Image position on eBay Issue

Ok, this will probably be simple to resolve, but I am a graphic designer & not a developer so wondering if someone can help me out. I have played around with positions but not such luck.
So I have a header div with a backgroud image within it, but when I preview the html/css on ebay the background image within this div appears at the top of the browser (conflicting with the ebay standard header) & not being positioned relative to the container div it is placed in. So basically the bg image is outside the div. I need it to be contained with the div I want it in.
Any help would be appreciated. (This may be a repetitive topic, so sorry about that)
Code:
<div id="HeaderContainer">
<div id="BGHeader"></div>
</div>
#HeaderContainer{
position:relative;
}
#BGHeader {
position:absolute;
top:0;
height:420px;
width:100%;
background-image:url(imagehere.jpg);
background-repeat:repeat-x;
}
You should post your html and css. At least the relevant parts. But having not seen them I would say my best guess is you're using absolute positioning on the header.
You need to wrap that in another element that's relative positioned.
<div id="container">
<header>header here</header>
</div>
where your css is like so:
#container{
position:relative;
}
header{
position:absolute;
top:0;
left:0;
}
If I'm wrong about your needs or situation let me know and I can update.