Try to test some Fields and when i check "Inspect element" to identify id or name of Fields but there was only class that didn't work so i decided to use XPath for example:
$I->fillField('/html/body/div/form/div[2]/div[3]/div/div[1]/label/span[1]','GRV');
And gets Failures and Error:
1) Couldn't sign in in Authorization
Ups, I couldn't fill field "/html/body/div/form/div[2]/div[3]/div/div[1]/label/s
pan[1]","blabla",
Field by name, label, CSS or XPath '/html/body/div/form/div[2]/div[3]/div/div[1]
/label/span[1]' was not found on page.
I checked few times XPath, can't test this fields. It would be great if you tell what a problem and how to solved it.
You try to fill a label, not the input element:
//label/span[1]
Make sure to select the input field you want to fill instead. Look for an <input id="foo"/> if your label has an for-attribute with value "foo".
Well, avoid usage of this kind of XPaths. It's really toooo loooong. You just break your mind and ours too trying to solve it :) Just add #id selector to the element you are matching and be happy.
The test with such XPath will break on every markup change of your page. Why would you need a test that is such hard to maintain?
Related
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it. But what if it does not have an ID?
For example the "Search" field in this page:
http://au.autodesk.com/speaker-resource-center/call-for-proposals/voting
<input type="text" placeholder="Search " class="form-control ng-valid ng-dirty search-box" ng-model="search.$" ng-change="updateButtons()">
I know it is possible to embed form values into the URL as parameters if the form has an ID assigned to it.
That is not true.
Server-side (and occasionally client-side) code on a page may read the query string as a means to set default values for form controls (typically so that a form can be corrected and resubmitted if there were errors in the previous attempt).
In these cases, the name attributes will usually map onto the query string (because the form will generate the query string from the name attributes). Often an input will be given an id that is the same as its name.
It is entirely under the control of the site's authors.
There is no way to set values of inputs on another site without the other side providing a mechanism to allow you to do that.
There's a few different ways to do that. Looking at that HTML, it's the first text-type input inside the div, so the first method that comes to mind is this:
You could pull out the div (using the class "search-area") and then target the first text input box within that div. I don't know whether you're using jQuery or native JS or exactly what language/library/framework you're using.
JQuery would be something like:
var inputElement = $(".search-area")[0].first()
This SO answer may help:
jQuery: how to find first visible input/select/textarea excluding buttons?
Edited to add: Answer is targetting the input element. As the answer from someone else mentions.. You can't actually do what you're wanting to do with the URL.
Edited again. Misread the question. I'll leave this here in case someone else needs to know how to target an input field that doesn't have an ID. Alternatively, I have no problems if someone wants to delete this answer.
I'm trying to click in a radio button by it's Xpath or Id.
I inspected the element with Google Developer Tool and was able to get below details:
Element Name: <label for="1346_Voltagem_0"
class="dimension-Voltagem espec_0 skuespec_110v
skuespec_Voltagem_opcao_110V
skuespec_Voltagem_opcao_110v">110V</label>
Xpath:
/html/body/div[9]/div/div/div[3]/div[3]/div[1]/div/ul/li[2]/span/label[1]
I would like to know how to say to the code that it has to click on that radiobutton?
Click here for the page where I want to click the radioButton. Also, please refer the below screenshot for the exact element
Avoid using absolute xpaths as a small change in the UI will cause a lot of changes to be made in your code.
For your question, the following xpaths will work.
driver.findElement(By.xpath("//label[text()='110V']")).click();
driver.findElement(By.xpath("//label[contains(#class,'110v')]")).click();
Try this:
driver.findElement(By.xpath("//input[#class='skuselector-specification-label input-dimension-Voltagem sku-selector skuespec_110v change-image']")).click();
You should use xpath for this since you need to find the label and then find the previous input to it
You can find the label using
//div[contains(#class,'prod-sku-selector')]//label[.='110V']
and now to get the previous input you can use
//div[contains(#class,'prod-sku-selector')]//label[.='110V']/preceding-sibling::input[1]
I always believe that xpath should not be much dependent on your html divs and hierarchy as that is very easy to fail even with a smallest change. So, using xPath like "/html/body/div[9]/div/div/div[3]/div[3]/div[1]/div/ul/li[2]/span/label[1]" is not a good option.
In this case, I would suggest you to go with below xpath:
If first radio button needs to be clicked:
//div[contains(#class, 'prod-sku-selector')]//input[#type='radio'][1]
If radio button with value 110v needs to be clicked:
//div[contains(#class, 'prod-sku-selector')]//input[contains(#value, '110V')]
Then you can get element using :
radioBtn1 = findElement(By.xpath("//div[contains(#class, 'prod-sku-selector')]//input[#type='radio'][0]"));
Also, you can click radio in selenium using:
radioBtn1.click();
I have two input fields that had the user access card and password. and the user click on submit button to authenticate.
I'm using DTM in my app to capture the user navigation but I want also to get the values of those field to my DTM so I would know who the user is.
And here is what I tried but with no luck.
Created Data element as below:
And created Event based rule. But not sure how to get the values to be shown in my report:
Thanks for your help.
Example Form
Since you did not post what your form code looks like, here is a simple form based on what I see in the screenshots you posted, that I will use in my examples below.
<form id='someForm'>
User Name <input type='text' name='userName'><br>
Password <input type='password' name='userPass'><br>
<input type='submit' value='submit' />
</form>
Data Elements
Okay first, let's go over what you did wrong.
1) You said you want to capture two form fields, but you only have one data element...maybe? You didn't really convey this in your question. I just assumed as much because of what you did throughout the rest of the screenshots. But to be clear: you should have two separate data elements, one for each field.
2) The CSS Selector Chain value you used is just input, so it will select the first input field on the page, which may or may not coincide with one of the input fields you are looking to capture. So, you need to use a CSS selector that is unique to the input field you want to capture. Something as simple as input[name="userName"] will probably be good enough (but I cannot confirm this without seeing your site). You will need to do the same for the 2nd Data Element you create for the other input field (e.g. input[name="userPass"])
3) In the Get the value of dropdown, you chose "name". This means that if you have for example <input type='text' name='foo'>, it will return "foo". Since you want to capture the value the user inputs, you should select "value" from the dropdown.
Solution
Putting all the above together, you should have two Data Elements that look something like this (one for the user name field and one for the password field; only one shown below):
Event Base Rule
Okay first, let's go over what you did wrong.
1) The value you specified in Element Tag or Selector is input. You aren't submitting an input field; you are submitting a form. Input fields don't even have a submit event handler! Your Event Type is "submit", so at a minimum, Element Tag or Selector should be form. But really..
2) Ideally, you should use a CSS Selector that more directly and uniquely targets the form you want to trigger the rule for. For example, maybe the form has an id attribute you can target in your CSS Selector. Or maybe the form is on a specific page, so you can add additional conditions based on the URL. What combination of CSS Selector or other conditions you use to uniquely identify your form depends on how your site is setup. In my example form above, I added an id attribute, so I can use form#someForm as the CSS Selector.
3) You checked the Manually assign properties & attributes checkbox, and then added two Property = Value items. This tells DTM to only trigger the rule if the input has a name attribute with value of "userName" AND if it has a name attribute value of "userPass". Well name can't have two values at the same time, now can it!
<input name='foo' name='bar'> <!-- bad! -->
All of this needs to be removed, because again (from #1), you should be targeting a form, not an input field.
4) For good measure, looks like you added a Rule Condition of type Data > Custom, but the code box is empty. The rule will only trigger if the box returns a truthy value. Since there is no code in the box, it will return undefined (default value returned by a javascript function if nothing is returned), which is a falsey value. This also needs to be removed.
Solution
Putting all the above together, the Conditions section of the Event Based Rule should look something like this:
But again, ideally your conditions should be more complex, to more uniquely target your form.
Referencing the Data Elements
Lastly, you can reference the input fields to populate whatever fields in the various Tool sections with the %data_element% syntax. For example, you can populate a couple of Adobe Analytics eVars like this (data element names reflect the examples I created above):
Or, you can reference them with javascript syntax in a custom code box as e.g. _satellite.getVar('form_userName');
Additional Notes
1) I Strongly recommend you do not capture / track this type of info. Firstly, based on context clues in your post, it looks like this may count as Personally Identifiable Information (PII), which is protected under a number of laws, varying from country to country. Secondly, in general, it is a big security risk to capture this information and send it to Adobe (or anywhere else, really). Overall, capturing this sort of data is practically begging for fines, lawsuits, etc.
2) Note that (assuming all conditions met), the "submit" Event Type will track when the user clicks the submit button, which is not necessarily the same thing as the user successfully completing the form (filling out all the form fields with valid input, etc.). I don't know the full context/motive of your requirements, but in general, most people aim to only capture an event / data on successful form completion (and sometimes separately track form errors).
I'm already excluding one input, and it adds the success class (which I don't mind)
$('form').parsley({ excluded: '[data-parsley-sum-total="all"]' });
but there are a number of other inputs that have no validations on them, and I don't want the 'parsley-success' class added on submit. If I add them to the list of excluded inputs, it still shows the 'parsley-success' class after submission. I'm just removing them manually right now on submit, but is there an option to not give them the class in the first place?
Using parsley 2.0.7
Thanks in advance for any help.
Edit:
In case this helps, my inputs I'd like to have the validation show up on are all in a single div like so:
<form id="f">
<input>
<input>
<div id="d">
<input>
<input>
</div>
I'd like to do something like $('#d').parsley() but that obviously doesn't work.
Also, besides using parsley excluded like I mentioned above, using data-parsley-group="" doesn't work for me either, both just exclude from validations, but don't solve the parsley-success problem for me.
Interesting point, it should be easier.
It's not too hard to get what you want though. You can listen for parsley:field:validate event, and toggle a class "no-constraint" depending on if it has constraints or not. A simple tweak to your CSS file will give the result you want.
I want to accomplish one simple thing using jQuery. I want to filter some table data on a page and there is a search box on top of the same page.
On every keystroke, I want to hide each row that does not match the search field. I want to process only client side data. How can I accomplish this?
Can anyone please give some example code of this? Like, how can I grab each keystroke and hide the required elements? I want something like this.
You need to use onkeydown, then grab it's val(), then find out if what the value :contains, matches up against whatever elements your using to compare it against, then hide() whatever elements do not match this condition and voila.
HTML:
<input type = "text" id="theText">
JQuery to get it's current value and display it on the console:
$('#theText').onkeydown(function(){
var x = $('#theText').val();
console.log(x);
});
It's a little old now, but I've used this plug-in in a project before and it worked great:
https://github.com/riklomas/quicksearch