When I run the robot framework code:
Wait Until Element Is Visible xpath=//span[contains(text(),'Add to Cart')] 10
Click Element xpath=//div/input[#id='_wdmaf']
I get the error
20190423 14:05:32.525 : FAIL : WebDriverException: Message: unknown error: Element
<input tabindex="0" bh="CHKGAT" id="_wdmaf" type="checkbox" value="1" class="w-chk-native" hasaction="true"> is not clickable at point (311, 221).
Other element would receive the click: <label bh="CHK" class="w-chk w-chk-dsize"></label>
The element I'm trying to click looks like this:
<td class="noWrap">
<input tabindex="0" bh="CHKGAT" id="_wdmaf" type="checkbox" value="1" class="w-chk-native" hasaction="true">
<label bh="CHK" class="w-chk w-chk-dsize"></label>
No matter how I try to change the selector, I keep getting that error. It is a checkbox with no text that then selects all of the items in a shopping list.
Any ideas?
It very well may be the case the label element is supposed to be clicked by the user - after all, selenium complains it is overlapping the input one in the layout, so it may be placed there intentionally.
If for all intents and purposes clicking the label leads to the desired functional change on the page (selecting all elements), I would go with it. The target xpath would be something like:
//div/input[#id='_wdmaf']/following-sibling::label
That will select the label that follows the input and is on the same label in the hierarchy. If you want to be a bit more specific about it, you can suffix it with the condition [#bh='CHK']
Related
I want to do a test on input text :
<input _ngcontent-c21="" autocomplete="new-password" class="form-control modal-input ng-pristine ng-valid ng-touched" id="prenom" name="prenom" type="text" xpath="1">
my code is:
Click Element xpath://span[contains(text(),'Nous contacter')]
Sleep 2
Location Should Be ${contactPageUrl}
Click Element xpath://input[#id='prenom']
Sleep 2
Element Text Should Be xpath://input[#id='prenom'] ${USERFIRSTNAME}
But i'm getting a result saying that the input text is empty even tho is not, is it because of the autocomplete="new-password" ?
That is an input field of type="text", but you did not typed any text into it. If you expect the field to be auto-filled with ${USERFIRSTNAME}, then there is missing the triggering of Angular action. This may be a timing problem, you did not wait for the field to be auto-filled, or you need to click the element to trigger it.
when I didn't set the product size, it will show the text "Must pick 1 size for the product". But it can't show the text. I want to know how to use select and input Element?
<select name="product_size" class="form-control" required oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')">
<option disabled selected>Select a Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
enter image description here
Welcome to StackOverflow!
There are a two things wrong with your code.
The oninvalid callback was never able to be executed, as nothing ever checked for the validity of the select element. You can fix this by wrapping it in a form element and have a <button> in it. When this button gets clicked by a user, the form gets validated by the browser, will see, that the select is invalid and call your oninvalid code.
It is never invalid in chrome. I have tested your code and it worked perfectly on Firefox after wrapping it with a form. Chrome however does not think your default option is invalid to make it think this I added the value="" attribute to it.
A working example:
<form action="javascript:void()">
<select
required
name="product_size"
class="form-control"
oninput="setCustomValidity('')"
oninvalid="setCustomValidity('Must pick 1 size for the product')"
>
<option value="" disabled selected>Select a Size</option>
<option>Small</option>
<option>Medium</option>
<option>Large</option>
</select>
<button type="submit">Submit</button>
</form>
I put a check box on the input function to make a secret comment on one post and put a secret comment function.
The first post was applied without any problem, but the problem is that when I put a secret comment on the second post and click on the check box, the first check box is selected. If you click on the check box of the third post, the check box of the first post is selected. And I think it's a check box problem, but how do we solve this problem?
I didn't seem to explain well, so I brought it to the picture to see what my post looked like....;D
https://imgur.com/dCgA1Z7
<form action="#">
<p class="secretWrap">
<label for="secret">
<input type="checkbox" id="secret" class="checkbox" name="secret" />
<span>SECRET</span>
</label>
</p>
</form>
https://jsfiddle.net/4wd56t7a/
It's because you're using the same 'id' and 'for' attributes on both of your checkboxes. They need to be unique or else you're associating that label with the first instance of the id.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
I used a select dropdown that is filled dynamically, based on conditions on country>state. But I can not get it out on context for the backend to properly save it to the database (selected value).
I can show the dropdowns correctly and save differently and correctly if I use a asp dropdownlist. Thing is, this code is imported and apparently all I can use if the select value.
<label for="country" class="col-form-label">Country: </label>
<select name="txtAddress_Country" class="countries order-alpha form-control" id="txtAddress_Country" runat="server">
<option value="">Select Country</option>
</select>
<label for="txtPersonal_FirstName" class="col-form-label">State: </label>
In the backend... this function works wonders with dropdownlist and text.
dbCampos.Save(u, new ASF.HC.JobApplication.Entity.Campo("txtAddress_Country", txtAddress_Country.Text));
So I am guessing the place to modify is the frontend.
I am guessing that I am missing some attribute but can not seem to find it. Says that it does not contain a definition for "Text" or accepting a first argument.
Maybe an initial value?
It is better to use instead of html with runat server.
secondly you can try as below:
dbCampos.Save(u, new ASF.HC.JobApplication.Entity.Campo("txtAddress_Country", txtAddress_Country.SelectedValue));
instead of:
dbCampos.Save(u, new ASF.HC.JobApplication.Entity.Campo("txtAddress_Country", txtAddress_Country.Text));
When customising the look of a checkbox using CSS, to be able to work the magic we first need to link an element (eg. label) to the checkbox.
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
However I am using Contact form 7 (wordpress plugin) and I cannot find where to add the id within the checkbox. If you specify an id in CF7 it adds it to the containing div (.wpcf7-form-control), and not the checkbox itself.
Therefore I can't get it working.
Am I missing something? is there another way to link the label and the checkbox?
Many thanks
The format used by Contact Form 7 is a little different from your HTML, but there are some targeting options that should be sufficient to grab any element you need.
When creating your form, you'll generate a checkbox shortcode that looks something like this.
[checkbox my-checkbox id:my-checkboxes use_label_element "foo" "bar"]
This code will generate:
A set of two checkboxes
Each of the two is wrapped in a <label> element (the text itself is in a <span>)
A parent element with the id="my-checkboxes"`
So the output markup will look something like this (along with some wpcf7 and Wordpress classes).
<span id="my-checkboxes">
<label>
<input type="checkbox" value="foo" /><span>foo</span>
</label>
<label>
<input type="checkbox" value="bar" /><span>bar</span>
</label>
</span>
Since you have an ID on the parent element, you can target this specific part of the form and elements within it using selectors in CSS or JQuery.
For example #mycheckboxes > label > input and #mycheckboxes > label > input + span.
For better targeting options, you can also create one checkbox per shortcode and assign an ID to each <span> checkbox container.
[checkbox my-checkbox id:a-checkbox use_label_element "foo"]
[checkbox my-checkbox2 id:another-checkbox use_label_element "bar"]
Since you're ultimate goal is to feed the information into Contact Form 7 (presumably to email it somewhere), it doesn't matter if you create each checkbox with a separate shortcode.