is the following syntax good to go to emhpasize a multicolumn headline totalling around 20 ~ 30 words? I dont want to use CSS3 multicolumns since it is not supported in IE9 etc.
<H3>
<div id="headingLeft" >blaa blaa blaa</div>
<div id="headingRight">blue blue blue</div>
</H3>
In response to a request from the OP:
[That's] what I was looking for! Place it as an answer so that I can accept is as an answer! The up-vote in your answer would be for the quality of the link you added. Explains everything in very clear language!
Have you considered using html5's header element, and the html5 doctype of course?
The headings shouldn't have div's inside of them. Maybe something more like this... The data in the two headings must not be too closely related, otherwise you shouldn't be splitting them apart at all. I'm assuming it's like a callout or something.
<div class="headings">
<h3 id="headingLeft" >blaa blaa blaa</h3>
<h4 id="headingRight">blue blue blue</h4>
</div>
Why not use a <div> with a class associated to it (or a css selector) instead of using H3 this way. I'm not sure this is the more SEO-friendly way of doing what you want to do.
<div class="headline">
<div id="headingLeft">blaa blaa blaa</div>
<div id="headingRight">blue blaa blue</div>
</div>
It doesn't seem that you're using H3 in a semantic way.
Related
I have the opposite problem described here. I can't get the text more than one layer deep.
HTML is structured in the following manner:
<span class="data">
<p>This text is extracted just fine.</p>
<p>And so is this.</p>
<p>
And this.
<div>
<p>But this text is not extracted.</p>
</div>
</p>
<div>
<p>And neither is this.</p>
</div>
</span>
My Python code looks something like this:
el.find_element_by_xpath(".//span[contains(#class, 'data')]").text
Try the same with child elements:
print(el.find_element_by_xpath(".//span[contains(#class, 'data')]").text)
print(el.find_element_by_xpath(".//span[contains(#class, 'data')]/div").text)
print(el.find_element_by_xpath(".//span[contains(#class, 'data')]/p").text)
Not sure what's the referred el in your original post. But able to get all the text using the below.
driver.find_element_by_xpath("//span[#class='data']").text
Output:
'This text is extracted just fine.\nAnd so is this.\nAnd this.\nBut this text is not extracted.\nAnd neither is this.'
Instead of relying on WebElement.text property consider querying innerText property
Consider using Explicit Wait as it will make your test more robust and reliable in case if the element you're looking for is loaded by i.e. AJAX call
Assuming all above:
print(WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//span[#class='data']"))).get_attribute("innerText"))
Demo:
Looking for the best approach to enter / read a value from a form field that lacks human readable ids / references.
The basic outline looks like
<div id="form-2143">
<div id="numberfield-1234">
<label id="numberfield-1234-label">
<span class="x-form-label">Field Name 1</span>
</label>
<div id="numberfield-1234-body">
<div id="numberfield-1234-wrap">
<input id="numberfield-1234-input" class="form-field" componentid="numberfield-1234">
</div>
</div>
</div>
...
</div>
There are more class defs and attributes involved, but above is the "basics" I have to work with.
This form has a number of entries, and there are more forms like it, so I am looking for a way to search for the label name, and access the input field within the same container.
I lack control of the site and cannot edit the HTML structure of the site; meaning I cannot give sensible names to the ids, but want to avoid hard referencing the poor names. Any suggestions on how to get Robot Framework & selenium to reference these elements?
Highlighting Andersson's answer in the comments
Using the XPath
//label[span[text()="Field Name 1"]]/following-sibling::div//input
Works for the above example.
The key part that answers the question of how to reference nearby elements is
/following-sibling
Can anyone help me? i tried using Firepath for a correct Xpath however the code it gives me is incorrect in my eyes. First line in the examples, is the provided one.
.//*[#id='content']/div/div/div[1]/h2/span
<div id="content" class="article">
<h1>News</h1>
<div>
<div>
<div class="summary">
<h2>
<span>9</span>
// this should be the correct xpath i think
_driver.findElement(By.xpath("//*div[#id='content']/div/span.getText()"));
Here i want check if the text in between is greater or equal to 1
and the other is:
.//*[#id='content']/div/div/div[3]
<div id="content" class="article">
<h1>News</h1>
<div>
<div>
<div class="summary">
<div class="form fancy">
<div class="common results">
Here i want to check if the div class common results has been made, 1 item equals 1 common results
For retrieving span text you can use this
String spanText=driver.findElement(By.xpath("//div[#id='content']/div/div/div/h2/span")).getText();
System.out.println(spanText);
From the second question I am not so much clear.You can get class name like this, Please explain me if its not your solution
String className=driver.findElement(By.xpath("//*[#id='content']/div/div/div/div/div")).getAttribute("class");
System.out.println(className);
I would suggest you making usage of:
//div[#id='content']/div/div/div/h2/span/text()
Note: the html code you shared was not well formed. I would suggest you to test in advance the code and the xpath with http://www.xpathtester.com/xpath (to fix the code) and http://codebeautify.org/Xpath-Tester (to test your xpath)
I am relatively new to programming and am making a website using bootstrap 3.0.
I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".
My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?
Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.
Thanks in advance.
looks like this is what you want
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4-offset</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
its perfectly fine to have column not add up to 12
here is a bootply
and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows
Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.
Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.
<div class="container">
<div class="row">
<div class="col-md-2"></div><!-- empty -->
<div class="col-md-4 margin">col-md-4</div>
<div class="col-md-4 margin">col-md-4</div>
</div>
</div>
CSS:
.margin {
margin-left:10px;
margin-right:10px;
}
Demo: http://www.bootply.com/OS6FX9sie8#
Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.
I need to test if the following HTML code and the CSS of that page results into a red and line-through price like:
<div class="listOldPrice">
<span>
<span class="wasPriceEuroDestination">€ </span>
719.
<b>-</b>
</span>
</div>
Can I do that with Selenium? How?
This is the Ruby solution:
price = #driver.find_element(:class, 'wasPriceEuroDestination')
assert_equal(true, price.displayed?)
assert_equal("rgba(255, 0, 0, 1)", price.css_value('color'))
assert_equal("line-through", price.css_value('text-decoration'))
That is usually handled by a class. Since classes aren't the prettiest to match on since they aren't very unique, it's difficult to give you a complete selector, but i'll put some placeholders in:
In Java, you could do something like:
assertTrue(driver.findElement(By.cssSelector("div#someParentOfThatPrice div.listOldPrice")).isDisplayed());
If this test fails, that means that it can't find the element, ergo, it's not crossed out.