I am working on Cypress and want to get a dynamic selector that always changes.
For example,
<div class="Select-value">
<input id = "react-select-9--value">
I want to get this input value but the number "9" for the ID changes every time I run the test. There is no other selector I can pick for this and there are other inputs on the same page with IDs like react-select-10--value, react-select-11--value.
What is the right way to get this type of selector in Cypress?
Thanks in advance!
You can aim for a relative element.
The only one shown above is the <div>, so using that as an example
cy.get('div[class="Select-value"]')
.find('[id^="react-select"]') // ^= means "starts-with"
.eq(0) // first one, because it looks like that above
Post a bigger example of the HTML if that's no good for you.
Related
I'm trying to get the value of several IDs (test0, test1, test2....). I've already tried to use [id^="test"], but it seems that it's the getelementById that is not working, even if I use :
document.getElementById('test0').value;
Here is the fiddle:
https://jsfiddle.net/xpvt214o/443502/
I just want to get the text in the span.
Thank you,
It is working fine, the only issue is that divs do not have a value property, therefore you get 'undefined'
Does anyone know how to set a value to span tag using capybara?
I tried using element.set or element.send_keys, they only selected the targeted element without modifing the previous value.
<div data-offset-key="bbpvo-0-0" class="_1mf _1mj"><span data-offset-key="bbpvo-0-0"><span data-text="true">aa</span></span></div>
HTML snippet is above, I want to set aa to bb.
Capybara is designed to emulate a user - A user can't edit a span unless there's some sort of javascript widget attached to it. If you have a JS widget attached to the span you would need to perform whatever actions a user would do in order to edit the span. So you say the user has to click on the span and then type on the span - if that is so then you could try something like
span = find('span[data-text="true"]')
span.click
span.send_keys("new content", :enter) # if enter is needed to end the editing
which may work - although I'm going to guess the element actually gets replaced with an input or something after it's clicked on, in which case you need to figure out what those elements are (using the browsers inspector) and then find and use send_keys or set on that element instead
To set text in span value,jquery can be used with capybara as shown below:
page.execute_script("$("<span css selector>").text("testing")");
or
page.execute_script("$("<span css selector>").html("testing <b>1 2 3</b>")");
I am new to automation (Cucumber), and has very less idea of coding. I am looking for the script through which I can click on checkbox or radiobutton. Below is the HTML code I am looking at:
<"input class="facetoption" type="checkbox" value="facets.price_range%5B%5D=Rs.+2000+and+Below" autocomplete="off">
And below is the step definition which I tried
Step definition:
Then(/^Select the first Price Range Option$/) do
#browser.checkbox(:value => 'facets.price_range5B%5D=Rs.+2000+and+Below').click
end
The value in your locator doesn't match the value in the <input> tag. Compare the strings, and you'll see they are different.
your HTML: "facets.price_range%5B%5D=Rs.+2000+and+Below"
your code: "facets.price_range5B%5D=Rs.+2000+and+Below"
Update your step definition to the following, and it should work:
Then(/^Select the first Price Range Option$/) do
#browser.checkbox(:value =>'facets.price_range%5B%5D=Rs.+2000+and+Below').click
end
I don't know why you try to find checkbox by value. Better option is to find checkbox by id or class:
find('input#id').click()
If you still like to find checkbox by value please use:
find(:xpath, "input[#value='John']").click()
Use a regex so you can focus on the imporant parts, and ignore the unimporant parts
#browser.checkbox(:value => /2000\+and\+Below/).click
I am trying to select a link/button inside of a form, that is in a div. the way it was made is that there are two links/buttons of the same id, name etc. however they are in different forms, so the code i wanted to use is:
_myTest.Form(Find.ById("PermissionsForm")).Child(Find.ByClass("saveBtn")).Child(Find.ByText("SAVE"));
any help would be appreciated
I think this is what you need:
var button = _myTest.Form("PermissionsForm").Button(Find.ByClass("saveBtn"));
This will lookup the button having the class 'saveBtn' inside the form 'permissionsform' in your browser instance _myTest.
Have a look at this page to decide if you need to have .Button(..) or .Link(...) based on the html tag that is used in your html.
How about building a regex for the element?
Regex could something like this
Regex elementRe = new Regex("id=LnkOk href="http://stackoverflow.com");
Then you can use your code to Click this link. The Click method can be extended to accept Regex if it is not already doing that.
Let me know how this goes or if you need more info.
Cheers,
DM
Summary
I am using jQuery to clone a div ("boxCollection") containing groups ("groupBox") each of which contains a set of inputs. The inputs have change events tied to them at $(document).ready, but the inputs inside the cloned divs do not respond to the event triggers. I can not get this to work in IE7, IE8, or FF3.
Here is my sample code:
HTML:
<div class="boxCollection"><div class="groupBox" id="group_1"><input type="text"></input></div></div>
jQuery events:
$(".groupBox[id*='group']").change(function(){
index = $(this).attr("id").substring(6);
if($("input[name='collection_"+index+"']").val() == "")
{
$("input[name='collection_"+index+"']").val("Untitled Collection "+index);
}
});
jQuery clone statement:
$(".boxCollection:last").clone(true).insertAfter($(".boxCollection:last"));
Use live() to automatically put event handlers on dynamically created elements:
$(".groupBox[id*='group']").live("change", function() {
...
});
You appear to be putting a change() event handler on a <div> however (based on your sample HTML). Also, I would recommend not using an attribute selector for this. You've given it a class so instead do:
$("div.groupBox ...")...
Lastly, you are trying to give each text input a unique name. You don't say what your serverside technology is but many (most?) will handle this better than that. In PHP for example you can do:
And $_POST will contain an element "box" with an array of three values.
I'm not sure if this will work, but I'm going to give it a shot and say that you need to assign live events
$(".groupBox[id*='group']").live('change', function() { });
You'll probably have a problem with change and live in IE6/7, so I advise you to use the livequery plugin to resolve that issue.