I have a multiple rows with div:
<div class="item">
<div... >some header and other text</div>
<div class="actions">
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
</div>
</div>
<div class="item">
<div... >some header and other text</div>
<div class="actions">
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
<button class="btn-action"><svg..></button>
</div>
</div>
So the divs with class item are repeating and can be 10 or more on th epage.
I need to click the second button on the LAST row.
I tried:
cy.get['.item button.btn-action:nth(1)'].last().click()
However this is clicking the 2nd button but in the first row, not the last.
I suppose first I need to select the last div e.g.
cy.get['.item'].last()
and then somehow to select the correct button with nth(), but not sure how when I get only the last div via cy.get.
ok for now I found a solution with find command, seems this is working fine:
cy.get('.item').last().find('button:nth(1)').click()
Related
I have a xml like this and am trying to select the groupIdentifier element without the display:none child (would like to use the css "identifier" along with it) to finally select the input. Have been at this for hours and would like to call the xpath gods to help me out.
<div class="groupIdentifier">
<div>
<input class="inputClassIdentifier">
</div>
<div>
...
<div>
<div class="something">
... some more elements
</div>
<div class="identifier hidden" style="display: none">
... some more elements
</div>
<div class="something">
... some more elements
</div>
</div>
</div>
</div>
<div class="groupIdentifier">
<div>
<input class="inputClassIdentifier">
</div>
<div>
<div>
<div class="something">
... some more elements
</div>
<div class="identifier ">
... some more elements
</div>
</div>
</div>
</div>
Thanks
edit:
I have
//div[contains(#class, 'identifier') and not(contains(#style, 'display: none'))] which basically selects the identifier div of the second section.
What I need now is to select the input with class inputClassIdentifier within its parent.
Here's your xpath.
//div[#class='groupIdentifier' and div/div/div[not(contains(#style, 'display: none'))]]
I got it using descendant axis
//div[#data-testid='groupIdentifier' and descendant::div[contains(#class, 'identifier') and not(contains(#style, 'display: none'))]]//input[#name='inputClassIdentifier']
I have a Thymeleaf template that should render the contents of a map. Here is the template:
<div class="akuiteo list-group" data-th-each="akuiteo:${akuiteoMap.akuiteoMap}">
<div data-th-replace="akuiteo::akuiteoView(${akuiteo.value},${akuiteo.key})"></div>
</div>
In the akuiteoView I have:
<button data-th-fragment="akuiteoView(commits,akuiteoNr)" class="akuiteo-file" data-th-each="commit:${commits}" data-th-id="${akuiteoNr}">
<p data-th-text="${akuiteoNr}"></p>
<div data-th-replace="commitDetails::commitView(${commit})">replace me</div>
</button>
The output I get is:
<body>
<div class="akuiteo list-group">
<button> content </button>
</div>
<div class="akuiteo list-group">
<button> content </button>
<button> content </button>
<button> content </button>
<button> content </button>
<button> content </button>
<button> content </button>
</div>
</body>
The div with the akuiteo class is duplicated, moreover there is one button for each commit instead of one button for each akuiteo instance, I can't understand why this happens, the expected output is:
<body>
<div class="akuiteo list-group">
<button> content(a list of one commit) </button>
<button> content(a list of 6 commits) </button>
</div>
</body>
This happens because of data-th-each. Thymeleaf iterates your map's entries and creates separate div for each entry. Then the same thing happens for buttons: thymeleaf render a new one for each commit. You should check out documentation explaining iterating using th:each.
To obtain expected output (1 div and 2 buttons) you should redesign your pages, e.g. like that:
<div class="akuiteo list-group">
<button data-th-each="akuiteo:${akuiteoMap.akuiteoMap}">
<span data-th-replace="akuiteo::akuiteoView(${akuiteo.value},${akuiteo.key})"></span>
</button>
</div>
and:
<span data-th-fragment="akuiteoView(commits,akuiteoNr)" data-th-each="commit:${commits}">
<!-- here goes content of a single commit -->
<span>
By the way, a <button> tag shouldn't contain such elements like <div> or <p>. I don't know anything about commits' content but consider either redesigning <button> to <div> (to keep the commit structure containing <p> and <div>), or summarizing a commits from an akuiteo in textual form (to keep <button>).
I would like to use Vue's collapse in my code, but I have an error.
[Vue warn]: <transition-group> children must be keyed: <p>
My component:
<template xmlns:v-model="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<section style="background-color: #dedede;">
<div class="container-fluid">
<div class="Consult-faq container">
<div class="row">
<div class="col-sm-12">
<h2>Cursos</h2>
<a v-for="(course,id) in courses" v-on:click="course.show = !course.show">
<a v-on:click="show = !show">
<div class="col-xs-12" style="border-bottom: solid;border-bottom-color: #999999;border-bottom-width:1px ">
<div class="col-xs-12">
<h4>
<i v-if="course.show" class="fa fa-plus-square text-right" aria-hidden="true"/>
<i v-else class="fa fa-minus-square text-right" aria-hidden="true"/>
{{course.text}}
</h4>
</div>
</div>
<transition-group name="fade">
<p v-if="show">
<div class="col-xs-12">
<article v-for="n in 2" class="Module-content">
<div class=" col-sm-12 col-md-6" style="position: relative;">
<div v-for="(course, index) in course.courses">
<course-card v-if="index % 2 == n - 1" :course="course"></course-card>
</div>
</div>
</article>
</div>
</p>
</transition-group>
</a>
</a>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default{
props : [
'courses'
],
data(){
return {
show: false
}
},
mounted() {
console.log(this.courses)
}
}
</script>
So, I'd like to know to collapse item per item. Like this in image.
When I click to expand, all courses expand or close all courses close.
Transition is irrelevant here (though you can get rid of that warning by using transition instead of transition-group, because the transition is only acting on a single node, not a group.)
Right now you're depending on a single variable show to control all of the elements' visibility, so they will all respond to clicks on any of them:
<a v-on:click="show = !show">
<p v-if="show" >
You need individual variables for each element if you want them to expand/collapse separately. You partially did this already, just change the remaining instances of show with course.show and you should be good to go.
(Probably want to clean up that nested <a> within <a> while you're at it; you can just remove the inner one.)
I solved this using vue-resource, I was using Guzzle in Laravel and require data in Controller make this not reactive. And I solved this problem using vue-resource in component.
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
This one has me stumped., I'm trying to select the first class = csb-quantity-listbox object of the below using the XPATH //select[#class='csb-quantity-listbox'][1], but instead of selecting the first quantity listbox it's selecting ALL the listboxes on the page with that class (see image below).
What am I doing wrong?
<div class="gwt-product-detail-products-container">
<div class="gwt-product-detail-products-header-column">
</div>
<div id="gwt-product-detail-widget-id-12766" class="gwt-product-detail-widget">
<div class="gwt-product-detail-widget-image-column ui-draggable" title="12766">
<div class="gwt-product-detail-widget-options-column">
</div>
<div class="gwt-product-detail-widget-price-column">
</div>
<div class="gwt-product-detail-widget-quantity-panel">
<select class="csb-quantity-listbox" name="quantity_12766"></select>
</div>
<div class="gwt-bundle-add-to-cart-btn">
</div>
</div>
</div>
<div id="gwt-product-detail-widget-id-10617" class="gwt-product-detail-widget">
<div class="gwt-product-detail-widget-image-column ui-draggable" title="10617">
<div class="gwt-product-detail-widget-options-column">
</div>
<div class="gwt-product-detail-widget-price-column">
</div>
<div class="gwt-product-detail-widget-quantity-panel">
<select class="csb-quantity-listbox" name="quantity_10617"></select>
</div>
<div class="gwt-bundle-add-to-cart-btn">
</div>
</div>
</div>
</div>
Image:
You just need to put brackets around the statement before the [1]
Like so:
(//select[#class='csb-quantity-listbox'])[1]