I can't get Capybara to find an element here;
<div class="block__body">
<div class="programme-list">
<div class="programme-item">
<div class="programme-item__header">
<svg class="icon icon--type">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-flexi"></use>
</svg>
<h3 class="programme-item__title">Flexi programmes</h3>
</div>
<div class="programme-item__body">
<ul class="list-style-none">
<div class="progress">
<div class="progress__status">
<div class="progress__total">
<span class="progress__label">
Total <strong>£265000</strong>
</span>
</div>
<a class="action action--link action--understate" href="/sponsors/1/programmes/sport-fit-scheme-1">
<span class="action__label">Sport Fit Scheme</span>
<!--<svg class="icon icon--arrow">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icons-chevron-right"></use>
</svg>-->
</a>
This is my code in my rspec file.
scenario 'Update programme' do
programme = create(
:programme,
id: 2,
name: 'Acme Two Programme',
description: 'The description for the Acme Two Programme',
account: create(:account)
)
sign_in_as(admin)
click_link 'Programmes'
within(:css, '.programme-list') do
within(:css, '.programme-item') do # this does not work...
end
end
The error I get is;
Capybara::ElementNotFound: Unable to find css ".programme-item"
Why can't it find the element? Is it because I have several of these elements in theory with the same name? If so, how can I specify just one?
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"
<div class="ant-select-selection ant-select-selection--single" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="7256666c-da5f-48d6-c8fc-a249a4ed0fc9" aria-expanded="false" tabindex="0">
<div class="ant-select-selection__rendered">
<div class="ant-select-selection-selected-value" title="cow_poop" style="display: block; opacity: 1;">cow_poop</div>
<div class="ant-select-search ant-select-search--inline" style="display: none;">
<div class="ant-select-search__field__wrap">
<input autocomplete="off" class="ant-select-search__field" value="">
<span class="ant-select-search__field__mirror"> </span>
</div>
</div>
</div>
<span class="ant-select-arrow" unselectable="on" style="user-select: none;">
<i aria-label="icon: down" class="anticon anticon-down ant-select-arrow-icon">
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true">
<path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path>
</svg>
</i>
</span>
</div>
So in this html tag. I have a dropdown menu and I'm trying to select the value cow_poop. The way I'm currently doing it is this way.
within('ant-select-selection') do
find('cow_poop').click
end
The problem with this method is that it's not working.
. is missing before the class name, it should be
within('.ant-select-selection')
You can also use:
within('.ant-select-selection') do
find('div.ant-select-selection-selected-value', text: 'cow_poop').click
end
Alternative
find (:xpath, "//div[text()='cow_poop']").click
I want to change my Page Layout according to how many files are existing.
I developed the following code:
<f:for each="{files}" as="file">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{file.identifier}" target="_blank">
<div class="filesize">({file.originalFile})</div>
</a>
</div>
</f:for>
Now there are different cases:
No files given -> empty div
1 File given -> Just show the one File
2 Files given -> Add Row with two columns, each column is col-6 and contains the file
3 Files given -> row(col-6, col-6), row(col-6)
4 Files given -> 2 rows, each with 2 col-6
5 or more files -> Just show the first 4 Files (as described in "4
files given")
How can i accomplish something like this.
I am using Typo3-9.5.5 btw
Is this a possible solution?
<f:switch expression="{files -> f.count()}">
<f:case value="0">EMPTY</f:case>
<f:case value="1">ONE</f:case>
<f:case value="2">TWO</f:case>
<f:case value="3">THREE FILES</f:case>
<f:case value="4">FOUR</f:case>
<f:defaultCase>MORE THAN FOUR</f:defaultCase>
</f:switch>
How can i address for exmaple the third element in {files} does it work like this: {files}[2]?
EDIT:
I solved it like this (There was no need for more than one row class):
<f:if condition="{files}">
<f:if condition="{files->f:count()} == 1">
<f:then>
<div class="row download-row">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="ce-textpic-file-download-wrapper ">
<a href="/fileadmin/{files.0.identifier}" target="_blank">
<div class="fileinfo">
{files.0.originalFile.properties.name}<br>
({files.0.originalFile.properties.size})
</div>
</a>
</div>
</div>
<div class="col-6"></div>
</div>
</f:then>
<f:else>
<div class="row">
<f:for each="{files}" as="file" iteration="iterator">
<f:if condition="{iterator.index} < 4">
<div class="col-lg-6 col-md-12 col-xs-12">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{files.iterator.identifier}" target="_blank">
<div class="fileinfo test">
{file.originalFile.properties.name}<br>
({file.originalFile.properties.size}
</div>
</a>
</div>
</div>
</f:if>
</f:for>
</f:else>
</f:if>
</f:if>
Depending on your variety of cases you might use different f:for viewhelper or change just the rendering inside of one single f:forviewhelper for all.
But you also should make use of the information an iterator will give you inside the f:for viewhelper.
You also might use a f:cycle viewhelper, so you do not need to caclulate modulo.
Number of files: {files->f:count()}<br />
<f:for each="{files}" as="file" iteration="iterator">
<f:cycle values="{0: 'odd', 1: 'even'}" as="cycler">
<f:debug title="inside the loop">{file:file, iterator:iterator, cycler:cycler}</f:debug>
</f:cycle>
</f:for>
EDIT:
regarding your cases I think you must consider two variants:
<f:if condition="{files}">
<f:if condition="{files->f:count()} == 1">
<f:then>
<f:render section="item" arguments="{file:file}" />
</f:then>
<f:else>
<f:for each="{files}" as="file" iteration="iterator">
<f:if condition="{iterator.index} < 4">
<f:if condition="iterator.isOdd"><div class="row"></f:if>
<div class="col-6">
<f:render section="item" arguments="{file:file}" />
</div>
<f:if condition="iterator.isEven"></div></f:if>
</f:if>
</f:for>
<f:if condition="{files->f:count()} == 3"></div></f:if>
</f:else>
</f:if>
</f:if>
<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
<a href="/fileadmin/{file.identifier}" target="_blank">
<div class="filesize">({file.originalFile})</div>
</a>
</div>
</f:section>
EDIT2:
<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
<f:link.typolink parameter="{file.publicUrl}" target="_blank">
{file.identifier}
<span class="filesize"> ({file.size->f:format.bytes()})</span>
</a>
</div>
just remember: aside of the properties visible in a <f:debug title="file">{file}</f:debug> you have a lot of other properies, given by the getters you could see in the API
My app has a dashboard with 3 columns.
All three columns represent a different state(field of model) of that object.
When in the first column it's 'pending', when you approve it, it goes to the 'accepted' column.
I start off by creating 3 objects, 1 in each column.
Then I want to be able to press the approve button of the first column and test if it moved to column 2.
This is the structure of the code currently:
<div class="col-xs-3 pending-candidates">
<div class="collection-menu">
<h1>Candidates</h1>
<div class="icon-menu"></div>
<i class="material-icons">done</i>
</div>
<ul id="applied-desktop-dashboard-ajax">
<li class="collection-item applied-candidate" id="pending_8"> <=== NEED TO COUNT THIS
<div class="first-content">
<div class="candidate-details">
<a href="/employees/8">
<h1>Patrick M.</h1>
</a>
</div>
</div>
<div class="second-content" style="display: none;">
<a data-remote="true" rel="nofollow" data-method="patch" href="/matchings/216?state=denied">
<i class="material-icons close-deny">close</i>
</a>
<a data-remote="true" rel="nofollow" data-method="patch" href="/matchings/216?state=accepted">
<i class="material-icons close-accept">done</i>
</a>
</div>
</li>
</ul>
I try to accessing it like following:
expect(page).to have_selector('applied-desktop-dashboard-ajax li', count: 1)
expect(page).to have_css('applied-desktop-dashboard-ajax li', count: 1)
and it returns following error message:
expected to find css "applied-desktop-dashboard-ajax li" 1 time
but there were no matches
same goes for when I only want to check if it has the ul (its always there even if it has no objects loaded in).
Anyone has an idea how to count the list items?
I think you just forgot the ID prefix (#) in your selector, it should be:
expect(page).to have_css('#applied-desktop-dashboard-ajax li', count: 1)
Hi I am trying to use angular filtering in my rails app,but I do not know why it's not behaving in the correct way.
So I have a gender dropdown selection on which i filter my listings array.
Here are the codes:
/listing.html.erb/
<div class="ui page grid">
<div class="column">
<form class="ui form">
<div class="six fields">
<div class="field">
<label>Gender</label>
<%=select(:listing,:gender,options_for_select([['Male','Male',{class:'item'}],['Female','Female',{class:'item'}]]),{prompt:'Gender'},{:'ng-model'=>'listing1.gender',class:'ui dropdown gender'})%>
</div>
</div>
</form>
</div>
</div>
<div class="ui divided items" ng-controller="ListingController" ng-init="init(<%=#listings.to_json %> )" >
<div class="item" ng-repeat="listing in listings | filter:{'gender':listing1.gender}">
{{listing1.gender}}
<div class="image">
</div>
<div class="content listing_content">
<i class="right floated large like icon"></i>
<i class="right floated large star icon"></i>
<%=link_to '{{listing.title}}','listings/{{listing.id}}',class:'header'%>
<div class="meta">
<span class="cinema">Posted On
<%= #date = '{{listing.created_at}}' %>
</span>
</div>
<div class="description">
{{listing.love_for_pets}}
</div>
<div class="extra listing_price">
<div class="right floated ui circular facebook icon button">
<i class="facebook icon"></i>
</div>
<div class="right floated ui circular twitter icon button">
<i class="twitter icon"></i>
</div>
<div class="right floated ui circular google plus icon button">
<i class="google plus icon"></i>
</div>
<div class="ui teal tag label"><i class="rupee icon"></i>{{listing.price}}</div>
</div>
</div>
</div>
</div>
It is getting all the data properly,everything is working fine,except for the filter.When i select female ,it gives me filtered output but for male I get all the listings.
Can someone please help in this.
The reason you're getting all results for "Male" is because the filter, as it's being used, returns partially matching results. To get an exact match within your filtering, modify your ng-repeat to this:
ng-repeat="listing in listings | filter:{gender : listing1.gender : true}
This should return strictly "Male" or "Female", and not match male to the partially matching female results.
Check out the docs on filter, specifically the arguments section that covers this option.
https://docs.angularjs.org/api/ng/filter/filter
Hope it helps!
I am writing some Capybara tests, and am failing at what seemed to be quite straight forward search. I have HTML:
<div id="divId">
<div class="unimportantClass">
</div>
<form id="formId">
<div>
</div>
<h2>Irrelevant text</h2>
<p>Equally irrelevant</p>
<span class="remarkableSpan">
<i class="whatever"> </i>
Some text
<input id="targetTag">
</input>
</span>
</form>
</div>
I am trying to confirm existence of "targetTag"
Everything goes well in
expect(page).to have_css('div#divId form#formId span.remarkableSpan')
but with
expect(page).to have_css('div#divId form#formId span.remarkableSpan input')
or
expect(page).to have_css('div#divId form#formId span.remarkableSpan input#targetTag')
it fails to find it. Any ideas what is causing it?