Using Selenium IDE, I need to verify the text "Schedule Entry Worksheet for ZBW - Boston Center" is present. I'd like to use AssertTextPresent to do this. I'm using Firebug to identify the path to the element.
Here's what I've done so far in IDE:
Command: assertTextPresent
Target: xpath=//html/body/div[7]/div[2]/div/div/span
Value: Schedule Entry Worksheet for ZBW - Boston Center
However, I'm getting "[error] false" in the log section. Does anyone know what I'm doing incorrectly?
Below is a snippet HTML for the page:
<div id="worksheet_div" style="display: inline;">
<div class="fg1" style="width: 2010px;">
<div class="fgt">
<span style="padding-right: 10px; background-color: #E3EFFF;">Schedule Entry Worksheet for ZBW - Boston Center</span>
</div>
does it matter where the text is or just that it is somewhere? if it is the latter you could do something as simple as
css=span
if position on the page matter then need to add more structure to it
css=.fgt span
or similar.
it is also useful to use the firefinder plugin for firefox to debug xpath and css
Related
In AEM 6.1, with a structure like this:
- Page
- form node
- parsys
- node 1
- node 2
- ...
- node n
The original form has the following code which works
<div data-sly-resource="${ 'parsys' # resourceType='foundation/components/parsys' }" data-sly-unwrap>
I'm trying to update the form component that injects something before the last node n. On the form node, I have the following code:
<div data-sly-list.children="${resource.listChildren}">
<div data-sly-list.fields="${children.listChildren}">
<div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>
<div data-sly-resource="${fields}"></div>
</div>
</div>
The data-sly-resource seems to cause the server to hang, with very high cpu usage while the browser is waiting for response. I have to terminate the server process and restart it.
I have tried <div data-sly-resource="${fields # resourceType = fields.resourceType}"></div> but it doesn't seem to render the fields as expected.
Is this the right way of iterating through nodes?
Update: Looked in the massive error.log file, and it seems the CPU spike was caused by infinite loop of RecursionTooDeepException - which I don't see where the recursion is.
According to the Sightly documentation on the Resource block statement, you need to pass in a path to the resource, either relative or absolute. I was able to make your code work by changing <div data-sly-resource="${fields}"></div> to <div data-sly-resource="${fields.path}"></div>.
<div data-sly-list.children="${resource.listChildren}">
<div data-sly-list.fields="${children.listChildren}">
<div data-sly-test=${fieldsList.last}> DO SOMETHING BEFORE LAST NODE</div>
<div data-sly-resource="${fields.path}"></div>
</div>
</div>
If you haven't already downloaded the Sightly REPL, I would highly suggest it to test and debug scenarios such as this one.
I would create a Sling Model and return the data from child nodes as a list from it.
See this link for reference https://sling.apache.org/documentation/bundles/models.html#collections
Is there a way to verify that element 'Adam Slodowy' is bold in Selenium IDE?
This is the fragment of site code:
...
<div class='thread-content-row.thread-content-row-1'>
<div class='thread-content-row-left'>
<div class='thread-content-row-right'>
<div class='discussion-info'>
<b>Daria Ogrodowska</b>
do
<span>super</span>
,
<span>Adam Slodowy</span>
</div>
<div class="discussion-content"> bla bl balkjbasdfsdfsdfdsfsdf sdfsdf sdf sdf </div>
</div>
</div>
I've tried to use verifyEval command:
Command: verifyEval
Target: var elem = window.document.querySelector("div.thread-content-row.thread-content-row-1 > div.thread-content-row-right > div.discussion-info span"); window.getComputedStyle(elem,null).getPropertyValue("font-weight");
Value: 700
but I have no idea how in querySelector refer to second span - querySelector("div.thread-content-row.thread-content-row-1 > div.thread-content-row-right > div.discussion-info span[2]") doesn't work.
It is really much more practical for a human person to check styles as even if it was bold it could look really bad and Selenium wouldn't be able to tell if it looked "bad" or not.
That being said, you would probably want to utilize xpath query on this one.
xpath=//span[contains(text(), 'Adam Slodowy')
or if you have more than one of those in your web page.
xpath=//div[#class='discussion-info']/span[contains(text(), 'Adam Slodowy')
the // indicates to look through the web page for an element that matches whatever follows. Which is very beneficial so that you don't have to include entire xpath which is very fragile if any of the structure changes.
I try to map the following html (it´s a small fce)..
<div>
<div data-hero="1">
<h1>
<!-- Headline -->
</h1>
<p>
<!-- Small Text -->
</p>
<p>
<a>
<span><!-- Button Text --></span>
</a>
</p>
</div>
</div>
Mapping is ok... But when i map the <span> i get a No content found div[1] div[1] p[2] a[1] span[1] error. The <a>-Tag is mapped outter so it should work..
What I try to achieve: Set a Text that is displayed in the <a>-tag, instead of the link target itself.
It´s a TYPO3 4.7 using the latest TemplaVoilà.
Why is that? Thanks in advance!
Edit
#biesior suggested this is not possible - so no i wrap a <span> into the <a>-tag via Typoscript.
Is there a chance to display a certain fields content in this <span> - speak: replacing the linktext, so that i can have a Click here for more ... instead of pageXY?
Btw: I use a linkfield and not the Rich-Text-Editor for setting the link.
You can not map any element nested in previously mapped element.
The fastest solution is mapping the A tag, and wrapping inserted text with <span>|</span> with TypoScript.
Is it somehow possible to place a span as the value of a text input field?
I am making a mailing system for a website and want a nice looking receivers input field, where added receivers are contained and added to the value of input text field. At the moment i use a separate "adding field" while showing added receivers in a span-container. I want to merge these to fields together. Just like any input field in regular e-mail software.
Help would be most appreciated! Thanks in advance!
Short answer: no, you cannot include a <span /> within an <input />.
You have a few options. You could use javascript to emulate behaviour like the email To: field. E.g. listen to key presses and handle actions like backspace after a ;.
Another option would be to make a list appear (css styled) like a textbox. Have the last <li /> contain a textbox with cleared styles. Every time the user adds a new email then insert a new <li /> before the textbox.
E.G.
html:
<ul class="email-textbox">
<li>bob#email.com;</li>
<li>jane#email.com;</li>
<li><input type="text" /></li>
</ul>
css:
.email-textbox {
background-color: #fff;
border: 1px solid #ccc;
padding: 2px 4px;
}
.email-textbox li {
display: inline-block;
list-style: none;
margin-left: 5px;
}
.email-textbox input {
background: none;
border: none;
}
javascript (jQuery, can change to vanilla)
$(function () {
$('.email-textbox').find('input').focus();
});
You will need to extend this javascript to include a keypress handler etc, but it gives the general idea.
Demo: http://jsfiddle.net/UeTDw/1/
Any option will require some javascript however.
If you can use jQuery, you could check out jQuery UI autocomplete
One way to do it would be to layer a text input on top of a div that is styled to look like a text input.
<div id="fake-input">
<span class="input-item">John Doe</span>
<span class="input-item">Jane Deere</span>
<input id="receiver-input" type="text" />
</div>
You can strip all styling off of receiver-input, and add borders, background colors, and such to fake-input so that it appears to be a text field. When a receiver is added, you can create a new input-item span and append it to the list.
Input text fields are typically used to accept raw text input. Attempting to wrap input text inside of a text field opens you to user error and potential difficulties with parsing data if the person is able to manipulate the tags.
Personally I would suggest keeping your current method but enabling some form of AJAX support to make things more dynamic and less error-prone to the user.
(My $0.02)
TextExtjs is probably what you want. It's a jquery plugin for allowing removable tags with autocompletion etc in a textarea.
And here is a related SO discussion - where I found this plugin - on mimicking the similar behavior found in some inputs on facebook.
Wordpress wraps images with captions in a div with a class of .wp-caption.
I'm looking for a way to select images that don't have this div so I can wrap them in different div. (to keep a consistent border around all the images)
<div class="blog-post-content">
<div id="attachment_220" class="wp-caption alignleft" style="width: 310px">
<img class="size-medium wp-image-220" src="/path/to/image" alt="" width="300" height="280" />
<p class="wp-caption-text">Caption Text</p>
</div>
<p>This is the body of the post</p>
</div>
To test my selector, I'm just trying to add a green border. I can handle the .wrap() once the selector is working.
The most promising of my attempts is:
$('.blog-post-content img').parent('div:not(".wp-caption")').css('border', '2px solid green');
... but no luck.
How about this: (untested)
$('.blog-post-content img').filter(function(){
return !$(this).parents('div').hasClass('wp-caption');
}).css('border', '2px solid green');
try:
$('.blog-post-content img').parent(':not("div.wp-caption")')
Not if what Matti says abotu the a element in the hierarchy then the above wont work.
I know this question was asked a long time ago, but I would like to suggest the following:
$('.blog-post-content img').closest('div:not(".wp-caption")')
Untested, but I think that should work, and is shorter than the answer above that works. Using closest means the a is ignored.