I want to check if a particular style has been applied to an element. Preferably using the css selector.
EG:
...
<div id="my_div" style="display: block; background-color:#fff;">
some content
</div>
...
How do I test that display is block regardless of the background color?
Worked it out:
command: assertAttribute or verifyAttribute
Target : css=#my_div#style
value : *display: block*
The asterisk is a wild card.
Related
I want to change button text which is generated by "Send to Messenger" plugin using javascript facebook SDK.
Fortunately, you can change the button texts! Unfortunately, you can't use arbitrary text. You can only choose from the pre-defined button texts by facebook.
Here's the list of button texts that you can use
GET_THIS_IN_MESSENGER
RECEIVE_THIS_IN_MESSENGER
SEND_THIS_TO_ME
GET_CUSTOMER_ASSISTANCE
GET_CUSTOMER_SERVICE
GET_SUPPORT
LET_US_CHAT
SEND_ME_MESSAGES
ALERT_ME_IN_MESSENGER
SEND_ME_UPDATES
MESSAGE_ME
LET_ME_KNOW
KEEP_ME_UPDATED
TELL_ME_MORE
SUBSCRIBE_IN_MESSENGER
SUBSCRIBE_TO_UPDATES
GET_MESSAGES
SUBSCRIBE
GET_STARTED_IN_MESSENGER
LEARN_MORE_IN_MESSENGER
GET_STARTED
You can change the text by setting cta_text attribute to one of the preceding
options. In this example, I used KEEP_ME_UPDATED option:
<div class="fb-send-to-messenger"
cta_text="KEEP_ME_UPDATED"
messenger_app_id="<APP_ID>"
page_id="PAGE_ID"
data-ref="<PASS_THROUGH_PARAM>"
color="<blue | white>"
size="<standard | large | xlarge>">
</div>
The easiest way I know to do it is by placing the send-to-messenger div inside another div & formatting the parent div & a sibling div.
The trick is to pass the click event through an element.
This requires position first div as absolute.
Here's my code
<div style='height: 32px;width: 148px;display: inline-block;overflow: hidden;color: #fff;'>
<div style='background-color: #5ac7ec;pointer-events:none;position:absolute;width:148px;z-index:2;line-height:36px;>
CONNECT
</div>
<div class="fb-send-to-messenger"
messenger_app_id="123456789"
page_id="987654321"
data-ref="some_data"
color="blue"
size="large">
</div>
You can use the cta_text option but you cannot write anything there, only couple of predefined texts.
Read more here
I'm using tne sling component /libs/wcm/foundation/components/image.
I need to use the rendering image as css background.
<img src="${image.src} /> -> OK: works
<div style="background-image: url('${image.src}')">my text</div> -> KO: does not work.
The result is <div style="background-image: url('')">my text</div>
I tried it on Chrome, FF and IE.
Can anyone help me solve this problem ?
Thanks
Sightly automatically escapes the values to prevent Cross Site Scripting issues, when do display context is specified. For CSS Strings, use the display context styleString so that it encodes characters that would break out of the string.
<div style="background-image: url('${image.src # context='styleString'}')">my text</div>
For more information on display context, refer to Sightly docs
Please try this:
style="background-image:url('${image.src # context='unsafe'}')"
In the recent version of TinyMCE editor( at this moment it's 4.0.5 ), When trying to apply a custom format for a text I've got this: <p class="Fomat1">sample text</p>
and after applying the second format I've got this <p class="Format1 Format2">sample text</p>
But I normally have to get this <p class="Format2">sample text</p>
So what will I have to do to get the desired result ?
Have a look at this example which shows you how to override the built in formats and add a few custom ones to the styles menu :
http://www.tinymce.com/tryit/custom_formats.php
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
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.