<button _ngcontent-c50="" class="mat-menu-item ng-star-inserted" mat-menu-item="" role="menuitem" tabindex="0" aria-disabled="false"> 11 - teste <div class="mat-menu-ripple mat-ripple" matripple=""></div></button>
Code Capybara,
tested with
browser.find('button', text: ' 11 - teste ').click
find_button(' 11 - teste ')
find('#button.mat-menu-item').click
With that HTML you should just be able to use
click_button('11 - teste')
If not provide the exact error message you get
Have you tried explicitly finding a button with the text you specified?
find('button', text: '11 - teste')
Depending upon your version of Capybara, you could also specify that it is the search is not exact:
find('button', text: '11 - teste', exact_text: false)
Related
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
Using ant design 4. New to the framework. Wondering why the below code doesn't work:
return (
<Form
initialValues={{ foo: 1 }}
form={form}
onFinish={onFinish}
>
<Form.Item dependencies={['foo']}>
{({getFieldValue,setFieldsValue}) => {
return (
<button
type="button"
onClick={() => {
setFieldsValue({ foo: getFieldValue('foo') + 1 });
}}
>
Click Me {getFieldValue('foo')}
</button>
);
}}
</Form.Item>
</Form>
)
Obviously I'm misunderstanding something about the way ant design forms work. My actual use case is very similar - I need to render a component that accepts an onClick and updates the form.
What am I misunderstanding here? Is there any way to make something like this work?
This is a bug that was fixed in 4.17, despite any mention of it in the changelog.
Stackblitz of Bug in 4.16.13: https://stackblitz.com/edit/react-joj8ay
Stackblitz of it Fixed in 4.17: https://stackblitz.com/edit/react-emyams
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
I have looked at Angular official material design tooltip page, however, cannot seem to find anywhere how to hide a matTooltip after set time interval if a user stays on the object for a long period of time? Is there a separate in-built property for that? Or I'll need some kind of workaround?
It is imported into my TS file as described in the documentation and it works as it supposed to, thus I'm not adding that part of the code here.
My HTML is as follows:
<a matTooltip="Info about the action" matTooltipPosition="right">
<i class="fal-settings"></i> Settings
</a>
Template:
<a #actionInfoTooltip="matTooltip" matTooltip="Info about the action" matTooltipPosition="right" (mouseenter)="hideTooltipIn(actionInfoTooltip, 3000)">
<i class="fal-settings"></i> Settings
</a>
Component:
import { MatTooltip } from '#angular/material';
...
hideTooltipIn(tooltip : MatTooltip, ms : number){
setTimeout(() => tooltip.hide(), ms);
}
Use matTooltipHideDelay to add a delay before the tooltip is hidden. For your case:
<a matTooltip="Info about the action"
matTooltipPosition="right"
[matTooltipHideDelay]="3000">
<i class="fal-settings"></i> Settings
</a>
This will hide the tooltip after 3 seconds.
I'm currently writing a Cucumber feature for a messaging system in a Rails app. This is one of my steps.
Then(/^they should see the message displayed in their language$/) do
id = "message_to_#{#family.id}"
expect(page).to have_selector("textarea##{id}")
save_and_open_page
expect(page).to have_field(id, type: :textarea)
end
The first assertion passes, but the second fails. When I inspect the markup created by save_and_open_page, the following element is present:
<textarea cols="22" disabled="disabled" id="message_to_13" name="body" placeholder="Hallo, Ich bin sehr interessiert an deinem Profil. Würdest du gerne mit mir in Kontakt treten?" rows="7"></textarea>
The error message displayed for the second test is:
expected to find field "message_to_13" but there were no matches. Also found "", which matched the selector but not all filters. (Capybara::ExpectationNotMet)
I'm tearing my hair out here to understand why Capybara can find this element that is obviously present using have_selector, but not with have_field?
The problem is that the textarea has the disabled="disabled" attribute, meaning it is a disabled field. By default, Capybara ignores disabled fields. New in Capybara 2.1 is the option to look for disabled fields.
Adding the disabled: true option will solve your problem:
expect(page).to have_field(id, type: 'textarea', disabled: true)
Note:
That when you include disabled: true, the field must be disabled. The default is disabled: false, which only matches fields that are not disabled.
That the :type value should be a string. As seen in the above, it is type: 'textarea'). Using a symbol, type: :textarea will not work.
It is possible, that you have some other element with either id, name or label that matches 'message_to_13'?
Because that's what the error message indicates - that it found something with 'message_to_13' but it wasn't a textarea. You could also try passing :textarea as string not symbol.
Your test is looking for an input field of type textarea. Textareas are not input fields, they are textareas. Try dropping the type: :textarea.
See here: https://github.com/jnicklas/capybara/issues/978