My html code looks like this:
<div class="entrybody"> Some text/content </div>
I want the first letter between this piece of code (for example "Some text") to become alot much bigger every time I post something on my blog. Here is a picture of what I mean:
http://i58.tinypic.com/9hierp.png
How do I do this? I have tried with
.entrybody::first-letter but it doesn't work...
You were using :: to access the psuedo element.
Put only one :
.entrybody:first-letter
http://jsfiddle.net/zb522v2g/2/
Read more about this here: http://www.hongkiat.com/blog/css-better-paragraph/
Related
Fairly basic question as I'm going back to webdev after a few years away so experimenting.
I want to create a reusable component that wraps an error message in a formatted element:
I'd call it in my partial as...
<x-error :blah="$woof"/>
The component code would be something like this:
#error('field') "nicely formatted message" #enderror
However, I want to be able to dynamically set the field name within for the error directive, something like:
#error($field) or #error({{ $field }}) "nicely formatted message" #enderror
...while in the executing partial it would be called through something like:
<x-error :field='email'> or <x-error :field='password'> or <x-error :field='description'> or whatever field name you like.
After spending way too long trawling the web for clues I'm starting to suspect this isn't possible.
Is it? If so how do you do it? Any help or clues gratefully received
Cheers!
The answer is embarrassingly simple: leave off the semicolon! The semicolon kinda acts like a pointer to a variable, rather than passing the data directly to the component, so instead of:
<x-error :field="$title" />
It should be :
<x-error field="title" />
In the component you merely call the variable name:
#error($field)
"nicely formatted message"
#enderror
Easy, init?
I have these 2 xpath that are different each time I load a webpage.
The xpaths were recorded by Selenium-IDE and always have mainForm_view within the id string and the text before and after this always changes.
xpath=//input[#id='abc_hyd_wuu2_8333nd_mainForm_view_jjd_uueue2_jjd_11_jkdhd']
xpath=//div[#id='abc_hyd_wuu2_8333nd_mainForm_view_kcjjcs_sjsjs_jjdj_994_kkk']/div/div[2]/div/div/div/a[1]/h2
I've tried to locate the id like below but doesn't work.
xpath=//input[contains(#id,'mainForm_view')]
xpath=//div[contains(#id,'mainForm_view')]
Which would be the correct way to do it?
Thanks in advance.
UPDATE
I've tried with CSS selector like below but it seems is taking another id that is within an input element
document.querySelector("input[id*='mainForm_view']").id
Examining the html code I see that the id I need is related with a unique class. The code is like below:
<div class="Class_p2">
<div class="Class_p3" style="...">
<input name="8333nd$mainForm$view$jjd$uueue2" type="text" class="class a1 n1-Control" value="xyz" id="8333nd_mainForm_view_jjd_uueue2" disabled="disabled" style="..">
</div>
<input name="8333nd$mainForm$view$ttyi" type="text" disabled="disabled">
</div>
I've tried the following Javascript code in Chrome console but it doesn't work
document.getElementsByClassName("class a1 n1-Control").id
How would be to get the id=8333nd_mainForm_view_jjd_uueue2 that is related with Class=class a1 n1-Control?
UPDATE2
I was finally able to do it with
document.getElementsByClassName("class a1 n1-Control")[0].id
Thanks for all the help and time.
You can write css selector as :
input[id*='mainForm_view']
for div it'd be :
div[id*='mainForm_view']
Asterisk is to match the sub string part.
Note that if any id contains mainForm_view that will also be selected, so better to check in developers tool before proceeding.
You can try finding some other element for which xpath/css locator remains same and then try to reach to this element by traversing from there. You can use parent, ancestor, preceding-sibling, following-sibling keywords in order to traverse. Hope it helps :)
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:
I am trying to automate test case using Protractor and Jasmine. The problem is I have an "article" web element tag that gets created at runtime and this web-element has a as sub element. This div element has a "id" tag associated with it. The structure of the code is below.
<article class="a b c d" data-ng-repeat="xyz repeat">
<div id="THIS IS WHAT I WANT" class="class name">
</article>
Now I am able to get get hold of the article web-element. but I am not able to get the ID attribute in the div. The ID values is generated dynamically. Kindly suggest how I can get the ID value.
Thank you
You can use a CSS Selector like this:
article > div
This will get you a div inside of an article. Now you can use this to play around and specify the selector further with classes or other stuff.
If you managed to get the div element you can then pull out the idea using (not sure if the syntax is correct but you should get the idea):
element.getAttribute('id')
1) element(by.xpath(//div[#class='class name'])).getAttribute('id')
2) element(by.xpath(//article [#class='abcd']//div[#id='THIS IS WHAT I WANT'])).getAttribute('id')
You can use chains like this:
element(by.classname('')).element(by.className('classname'));
or
element(by.css('css of parent')).element(by.css('child css'));
or you can use element(by.repeater('repeat in reapeats')).element(by.css(''));
Hi I want to hold element references in files somewhere. and then in run time search for elements withing referenced elements in Selenium how to do that.
For example- a Frame contains multiple text boxes -and multiple frames of similar properties exist where the textboxes are also duplicate. Something like I wanna reference the text box under a particular frame. But i wanna predefine the frame. and the specify that search under that frame[Something like Aliases in Testcomplete]
For Example - similar concept exist in Cheezy's Page-Objects. but not quite.
if you have a structure like this:
<div class='some class'>
<input class='input-button' value='submit'>Submit</input>
</div>
<div class='some class2'>
<input class='input-button' value='submit'>Submit</input>
</div>
and you want to find the first 'Submit' which is within the 'some class' div, you can do this:
parent_element = driver.find_element(:xpath, "//div[#class='some class']")
child_element = parent_element.find_element(:xpath, ".//input")
p.s. this is ruby code.