xpath - how to select this submit button? - forms

How can I select this submit button?
<li id="district_schedule_set_submit_action" class="action input_action ">
<input class="sexybutton sexysimple sexyorange" type="submit" value="Generate Schedules" name="commit"></input>
</li>
What didn't work...
//input[value()='Generate Schedules'
//form[input()='Generate Schedules']
//input(text(),'Generate Schedules'))
//input[text(),'Generate Schedules')]

I believe
//input[#value="Generate Schedules"]
will work

Another option: //input[#type='submit']

//input[#value='Generate Schedules']
will work (not sure it likes double quotes). When you want to match the exact text, you use the = sign. If you are trying to match partial text, you use a comma wrapped in contains:
//input[contains(#value,'Generate')]

This code can be used to check in console in developer tools in Chrome
$x('//button[#label="Submit"]')

Related

how to find the span in protractor

i want to turn on the toggle button in protractor. below is the DOM
<input type="checkbox" id="UseRecipientList" ng-model="newProduct.useRecipientList" class="ng-pristine ng-untouched ng-valid">
<span>
::before
::after
</span>
if I identify the element by xpath, it is working fine. i have used, element(by.xpath("//input[#id='UseRecipientList']/following-sibling::span"));
if I want to go by ng-model, how to identify the span which comes after ng-model as above in protractor?
Use css as below
const locator= element(by.css('input#UseRecipientList > span'));
So the above locator help you to get the span as below
locator.getText();
To inspect using model name.Try the below one.
var input = element(by.model('newProduct.useRecipientList'));
For more on ng-model refer https://www.protractortest.org/#/api?view=ProtractorBy.prototype.model
Hope it helps you!!
Try with css locator
(by.css('[ng-model="newProduct.useRecipientList"] span'));

Can we change "Send to Messenger" plugin button text?

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

Watir-Webriver - Automating autocompletion field

Using Watir-webdriver I am trying to input an answer to a question that autocompletes as you type from a selection, I have searched all over the place for an answer but to no avail.
heres the snippet of code that i am trying to get some form of a id from so i can just inject into it ;)
<input type="text" data-bind="source: MultiOptionsList,events:{select:AutoSelect},value: AutocomplateText" data-text-field="Value" data-role="autocomplete" class="form-input k-input" style="width: 100%;" autocomplete="off" role="textbox" aria-haspopup="true" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false">
Hope this makes sense, looking for something along the lines of "#browser.(:id => "blah").set "#{arg}""
Thanks Guys!
Given that this is the only autocomplete control on the page and the text field does not have any descriptive attributes, you could locate the element by its data-role attribute:
browser.text_field(:data_role => 'autocomplete').set('some text')

Autofill input type="text" field from an external link

I have a link on one page which looks like this:
http://www.domain.com/sample-link#product_id
and on the other page (sample-link), I have this input field:
<input type="text" name="name" value="name" />
So, when I click the link from the first page, I want to open the "sample-link" page, and autofill the name field with the "product_id" text. Any ideas how can I make this?
Thanks in advance.
You'll just have to add a tiny Javascript snippet:
if (document.location.hash)
document.getElementById('testbox').value = decodeURIComponent(document.location.hash.substr(1));
For obvious reasons you'll have to adjust the id of the text box.
It gets a bit more complicated in case you'd like to pass more than one value.
The call to decodeURIComponent() is optional, but required in case you're passing characters like spaces or non-alphanumerical stuff (just to be sure).

jQueryUI datepicker issue in append method

okay so i have this page im making, the navigation panel is simple, when i click a link according the the link name it appends the html into the content area, here is the append script for this section
So my goal is where the input box is the ID datepicker im trying to use the jQueryUI datepicker function from jQuery, i tested a regular input box in the actual BODY and not through the append method and it works fine, my issue is im guessing the single vs the double qoutation marks, the ' vs "
how can i solve this issue?
else if (this.id == "tour"){
$("#content").empty();
$("#content").append("<p>\
<h2> Add Tour Dates </h2>\
<form action='tourdates.php' method='post'>\
<input type='text' name='title' placeholder='Title' id='title'>\
<input type='text' name='venueName' placeholder='Vanue Name' id='venueName'>\
<input type='text' name='venueStreetAdress' placeholder='Location Street Adress' id='venueStreetAdress'>\
<input type='text' name='venueCity' placeholder='City' id='venueCity'>\
<input type='text' name='venueState' placeholder='State' id='venueState'>\
<input type='text' name='venueZip' placeholder='Postal Code' id='venueZip'>\
<input type='text' name='datepicker' id='datepicker'>\
<input type='text' name='time' placeholder='Time' id='time'> </p>\
");
If you have a strong feeling that there's something to do with your quotation mark, try to narrow down the problem: Have you tried to put this in a separated variable and make the reference there?
var htmlStuff = "<p>\
<h2> Add Tour Dates </h2>\...";
$("#content").append(htmlStuff);
But I don't think your problem is related to double/single quotes, but with the asynchronous operation of setting up a link to append HTML and try to assign an UI widget before the components exist in the DOM.
Although I find this very bad for code readability, one option would be to append another call to a function that defines the DatePicker (like a "callBack") right after your append. It should work, e.g.:
$('something').append(" <html stuff> ").defineDatePicker();
function defineDatePicker(){
$('one of the elements within that html stuff').datepicker();
}