I have a drop down menu. I want capybara to go through it and find the specific element and click on it. I'm currently trying to do a within clause and having it iterate through the list and find this element: "Cow_poop"
<li role="option" unselectable="on" title="Cow_poop" class="ant-select-dropdown-menu-item ant-select-dropdown-menu-item-selected" aria-selected="true" style="user-select: none;">Cow_pop</li>
This is the code that I'm trying to do.
find('div.ant-select-dropdown-menu-item-selected', text: 'Cow_poop').click
However it's giving me this error:
Capybara::ElementNotFound:
Unable to find css "div.ant-select-dropdown-menu-item-selected"
It's not a <div> but a <li> element.
Your effective line of code will be:
find('li.ant-select-dropdown-menu-item-selected', title: 'Cow_poop').click
Alternative:
find('li.ant-select-dropdown-menu-item-selected[title=Cow_poop]').click
Related
I often use this site but it had never happened to me to ask a question. Now I am blocked and so it is time to ask the first one.
I need to test a sign up form created with vue 2 and vuetify, server side rendered with ruby on rails, webpack 5.
I configured capybara with selenium chrome headless driver, it works when it comes to interacting with text fields and buttons but when I try to check the checkbox:
(byebug) check('Accept')
*** Capybara::ElementNotFound Exception: Unable to find visible checkbox "Accept" that is not disabled
Vuetify hides the input and replaces it with beautiful div but, what is the best approach to check a v-checkbox?
Signup form
If I add the visible attribute, the input is found but nothing happens. I think I need to interact with some other element?
(byebug) check('Accept', visible: false)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">
I also tried this but still nothing happen:
(byebug) page.find('input[type=checkbox]', visible: false).set(true)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">
So I also tried the click way but getting this error:
(byebug) page.find('input[type=checkbox]', visible: false).click
*** Selenium::WebDriver::Error::ElementClickInterceptedError Exception: element click intercepted: Element <input aria-checked="false" id="input-96" role="checkbox" type="checkbox" value=""> is not clickable at point (234, 531). Other element would receive the click: <div class="v-input--selection-controls__ripple"></div>
(Session info: headless chrome=85.0.4183.121)
I tried also executing the raw script:
page.execute_script("window.uiApp.$data.terms_and_conditions = true")
The vue app is mounted in this way:
window.uiApp = new Vue({
i18n,
vuetify,
store,
router,
el: id,
render: h => h(App, {
props
})
})
But window.uiApp.$data is empty, so this attempt also seems to fail :( How to access vue component data (without vue web tool)?
I don't know what else to try, thanks in advance
Looking at the HTML shown in your linked image (in the future when asking questions it would be helpful if you included the relevant HTML directly in your question) it looks like you have a label associated with the hidden checkbox that the user can click. In that case you can use
check('Accept', allow_label_click: true)
which, when the actual checkbox is hidden, will click on the associated label instead. If you want that behavior to be on by default you can set Capybara.automatic_label_click = true.
Your other option is to determine exactly which element is actually being shown as the 'checkbox' and use find(...).click to locate that element and click on it.
I changed the checkbox in this way:
<v-checkbox v-model="terms_and_conditions"
#input='$v.terms_and_conditions.$touch()'
#blur='$v.terms_and_conditions.$touch()'
:label="$t('commons.accept')">
</v-checkbox>
<div class="ml-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<a
target="_blank"
href="/users/terms_and_conditions"
#click.stop
v-on="on"
>
{{ $t('session.sign_up.terms') }}
</a>
</template>
{{ $t('session.sign_up.terms_hint') }}
</v-tooltip>
</div>
Thank you
Below is my html, from where I am trying to get the text of header. I tried multiple ways to select it but not succeeded in it. Could you please help me to get the element so that I can get the text.
<div class="esuite-right">
<div class="angular-css ng-panel ng-panel-boxed">
<div class="ng-panel-hdr">
<h2 class="ng-binding">
Case-10006336-2015
<span class="sch-tek "> | </span>
Case details
</h2>
</div>
<!-- ngIf: zaak.vertrouwelijk -->
<div>
</div>
Title of the frame is "Case-10006336-2015" and tried to locate the element by using below various ways however not able to succeed in it.
labelSelectedCase { $("div", class: contains("angular-css ng-panel ng-panel-boxed")).$("div", class: contains("ng-panel-hdr")).$("h2",class: contains("ng-binding") ) }
labelSelectedCase { $("div.angular-css ng-panel ng-panel-boxed div.ng-panel-hdr").find("h2", class: contains("ng-binding")) }
and several others but not able to locate this element.
Could you please help me to get this element so that I can get the text and assert it.
Thanks in advance.
Either of these should work -
labelSelectedCase { $("h2.ng-binding")}
labelSelectedCase { $("span.sch-tek").parent()}
I'm not sure Content defined like you have in 1) is even valid so that could explain why $(x).$(y).$(z) doesn't work, and I'm pretty sure 2) goes astray at the second and third classes of the first div, maybe you have to chain the classes if you want to select on multiple classes like this -
labelSelectedCase { $("div.angular-css.ng-panel.ng-panel-boxed div.ng-panel-hdr").find("h2", class: contains("ng-binding")) }
Good luck,
Deon.
Update 2: A The following repo on github shows the problem.
Update 1: Calling #firstNode in Template.editor.rendered returns <div class="editor"></div>.
I have the following template:
<template name="editor">
<div class="editor">
{{#each objects}}
<div class="object">{{content}}</div>
{{/each}}
</div>
</template>
The data is provided by iron-router in the data callback.
The coffeescript for my template:
Template.editor.rendered = ->
#findAll('.object').draggable()
When I go into my browser and try to drag one of the objects I get the text selection cursor and begin to select the text with the div instead of the object being dragged. So what is wrong and how can I get the drag and drop to work?
The drag and drop functionality is being provided by jquery-ui. Which is installed as a smart package.
Also feel free to edit the title of this post as I had a tough time coming up with one that made sense
The solution I found was to abstract <div class="object">{{content}}</div> into a seperate template like so:
<template name="object">
<div class="object">{{content}}</div>
</template>
Then change
Template.editor.rendered = ->
#findAll('.object').draggable()
to
Template.object.rendered = ->
#findAll('.object').draggable()
As stated in meteorpedia.
I`m trying to create a widget for dashing (http://shopify.github.io/dashing/) for displaying 4 values:
value1
value2
value3
value4
I have copied the contents of the text widget and added the following to the widget.html
<h3 data-bind="text | raw"></h3>
<p class="more-info" data-bind="moreinfo | raw"></p>
<p class="value1" data-bind="value1"></p>
<p class="value2" data-bind="value2"></p>
<p class="value3" data-bind="value3"></p>
<p class="value4" data-bind="value4"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
When I add this widget to my dashboard using:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="mywidget" data-view="mywidget" data-title="Grupserhs" data-text="Systems Dashboard" data-moreinfo="Hello"></div>
</li>
Yet I have a blank page in my dashboard.
What would be the correct way to create a widget that will only receive pushed data?
Thanks in advance.
Actually use "list" widget for this. Look at the 'buzzwords.rb' file for an idea.
Do you have a coffeeScript file that defines your widget class and extends Dashing.Widget? You don't need anything else in there to start, but that is where your widget is defined.
Also, do you have a job pushing data to this widget id "mywidget"? If not, look in the jobs folder, same level as widgets folder to get an idea, basically a Rufus scheduler task to pump data to your widgets. ..and don't forget to check the css for your widget..
From the current information, in the dashboard, it shall using like
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="mywidget" data-view="mywidget" data-title="Grupserhs" data-text="Systems Dashboard" data-moreinfo="Hello" data-value1="first value" data-value2="this is value2" data-value3="value3" data-value4="last value" ></div>
</li>
The data-bind="value1" shall be mapped into dashboard like data-value1
It may have other problems, like putting those widget in separate folder, your css format. Please provide more detail file list for reference if it can't solve it.
I searched a lot on net but couldnt find any solution. I am making a webapp in which I want 2 textbox to get data input from user. I want autocomplete feature in this textbox. The list of tags for autocomplete is available locally. I tried listview but what I want is that after user select some option from autocomplete hints, the textbox should have the selected value, and through some object, i should get the value of textbox to be used by javascript/php. This is a very basic thing, but I'm not able to do. Please help me out
I tried this jsfiddle.net/ULXbb/48/ . But the problem in this is that both listview gets same value after I select something in 1 listview.
In order not to add the same value to both search input, you need to target them using .closest(), .next(), .prev() and .find(). jQuery-Mobile, enhances list-view with data filter in a different way.
Demo
<form>
<input>
</form>
<ul data-role="listview">
<li>
<a>text</a>
</li>
</ul>
The form where the input is located, is on the same level of the ul. To target the input box, you need to use .prev('form').find('input'). Check the demo and the new code below.
$("input[data-type='search']").keyup(function () {
if ($(this).val() === '') {
$(this).closest('form').next("[data-role=listview]").children().addClass('ui-screen-hidden');
}
});
$('a.ui-input-clear').click(function () {
$(this).closest('input').val('');
$(this).closest('input').trigger('keyup');
});
$("li").click(function () {
var text = $(this).find('.ui-link-inherit').text();
$(this).closest('[data-role=listview]').prev('form').find('input').val(text);
$(this).closest('[data-role=listview]').children().addClass('ui-screen-hidden');
});
Thanks #user714852 I have extended your answer just add this line in the script tag:
$("#mylist li" ).addClass('ui-screen-hidden');
It will do wonders.
A working example: Listview Autocomplete - Enhanced