I'm using Feature file below:
Scenario Outline: Admin can send invitations to any user roles
And Click on drop-down to select role <Role>
Examples:
|Role|
|Admin|
|Manager|
I'm trying to write a step definition file here, but none of them worked
#1: Passing as parameters... doesn't work
And('Click on drop-down to select role "([^"]*)"', (role) => {
cy.get('.add-person__inputs--container > :nth-child(2) > .ui').contains(role).click()
#2: Passing as string values....doesn't work
And('Click on drop-down to select role {string}', (role_value) => {
cy.get(`.add-person__inputs--container > :nth-child(2) > .ui[value='${role_value}']`).click()
Cypress result of #1 & #2:
#3: also tried this and seems to have a better shot cos simply it gave me a different error LOL
And('Click on drop-down to select role {string}', (role_value) => {
cy.get('.add-person__inputs--container > :nth-child(2) > .ui').find(role_value).click()
Cypress result for #3:
HTML for the page I'm testing, I'm trying to get those highlighted values from dropdown items but it has no id or name in front of each item
And I got cy.get('.add-person__inputs--container > :nth-child(2) > .ui') from Cypress selector
HTML tags
<div class="add-person__inputs--container" style="" xpath="1"><div class="field "><span class="login-form__inputs-container--title">Email</span><div class="ui large input login-form__inputs-container--input"><input name="email" placeholder="Add email address" autocomplete="new-password" type="email" value=""></div></div><div class="add-person__description--container"><span class="login-form__inputs-container--title">Role</span><div name="role" role="listbox" aria-disabled="false" aria-expanded="true" class="ui active visible fluid selection dropdown add-person__dropdown" tabindex="0"><div class="text" role="alert" aria-live="polite">Viewer</div><i aria-hidden="true" class="chevron down icon"></i><div class="visible menu transition"><div role="option" aria-checked="true" aria-selected="true" class="active selected item" style="pointer-events: all;">Viewer</div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">Grower</div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">Manager</div><div role="option" aria-checked="false" aria-selected="false" class="item" style="pointer-events: all;">Admin</div></div></div></div>
please bear in mind I'm very new to coding but I think the issue is either step definition file or css selector... :(
Thanks in advance :D
It looks in step call missing quotes, try as blow:
And Click on drop-down to select role "<Role>"
In Example: change it to string. This worked for me:
Scenario Outline: Admin can send invitations to any user roles
And click on dropdown to select role.
Examples:
|Role|
|"Admin"|
|"Manager"|
and
('Click on drop-down to select role {string}', (role_value) => {
cy.get(`.add-person__inputs--container > :nth-child(2) > .ui[value='${role_value}']`).click()
So this is what worked for me:
In the feature file:
And Click on drop-down to select role "<Role>"
In the step definition file:
And(/^Click on drop-down to select role "(.*?)"$/, (role) => {
cy.get('.add-person__inputs--container > :nth-child(2) > .ui').contains(role).click()
});
Related
I have few dropdown lists and the common element in all is the role="list". I would like to implement toggle when I click on one dropdown, it closes the other open dropdown.
<div id="dropdownList1" class="jqx-listbox jqx-reset jqx-rc-all jqx-widget" aria-multiselectable="false" role="list"></div>
<div id="dropdownList2" class="jqx-listbox jqx-reset jqx-rc-all jqx-widget" aria-multiselectable="false" role="list"></div>
<div id="dropdownList3" class="jqx-listbox jqx-reset jqx-rc-all jqx-widget" aria-multiselectable="false" role="list" ></div>
check this out : add onclick="closeOthers(this)" to all dropdown items and here is the function :
function closeOthers(selected_dd){ $.each($('.jqx-listbox[role="List"]'),function(i,v){
$(v).removeClass('open');//close all
});
$(selected_dd).addClass('open'); //here is how to select the item u want, then u can open it as u want
}
consider that i made open class by myself... you can use any ather logic!
<div class="dimension-section no-border-radius margin-top-2">
<div class="dimension-size"></div>
<div>
<ul>
<li v-on:click="display = !display" #click="getPartingCharges('5-10')" :class="{ active: isActiveClass, }" class="product-list">5-10 </li>
<li #click="getPartingCharges('10-22')" :class="{ active: isActiveClass,}" class="product-list">10-22 </li>
<li #click="getPartingCharges('22-27')" :class="{ active: isActiveClass, }" class="product-list">22-27</li>
</ul> <span v-if="display">charges will be applied</span>
</div>
</div>
I have 3 li tags, where i need to display message, on click of selected quantity like 5-10,10-22,22-27.
condition is like if user select (5-10) i need to display message like charges apply, Else need to display if user select (10-22)(22-27) need to display message like no charges apply. using if else coditions.
<span v-if="display">charges will be applied</span>
<span v-else>charges will not be applied</span>
I am not sure what you mean. but in vuejs you can use the if-else statement.
if I can check your code, I will give good answer.
and you should better for "display". this is master boolen value.
Running this piece of Bootstrap HTML and JS code below, I am struggling to not initiate the modal when clicking on the dropdown navi-link (e.g. Mark as Read).
<ul id="notification_items" class="navi navi-hover">
<!--begin::Item-->
<li id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-subject="Some Subject" data-notification-message="And some message" class="notification_item cursor-pointer navi-item">
<div class="pr-10 pl-2 navi-link">
<div class="navi-label mx-5"><span class="label label-dot label-lg label-primary mt-n6"></span></div>
<div class="navi-text">
<span class="font-weight-bolder font-size-lg">Some Subject</span><span class="text-muted"> - And some message</span>
<div class="text-muted font-size-sm">3 hours ago</div>
</div>
<div class="notification_actions dropdown dropdown-inline d-none">
<i class="far fa-ellipsis-h"></i>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right" style="">
<ul class="navi flex-column navi-hover py-2">
<li class="navi-item"><span data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" class="notification_mark_as_read navi-link"><span class="navi-icon"><i class="fad fa-comment-check"></i></span><span class="navi-text">Mark as Read</span></span></li>
<div class="dropdown-divider"></div>
<li class="navi-item"><span class="navi-icon"><i class="far fa-trash-alt text-danger"></i></span><span class="navi-text text-danger">Delete</span></li>
</ul>
</div>
</div>
</div>
</li>
<!--end::Item-->
</ul>
And the simple JS code piece to show the modal when clicking on the <li>:
$(document).on("click", ".notification_item", function () {
$('#notification').modal('show');
});
I tried to e.stopPropagation(); when clicking on the .notification_actions Which works initially, but then obviously every other event won't work anymore.
You have to play with the arguments from the event parameter of the click event: target and currentTarget
target will return your DOM element on which the click occurred
initially
currentTarget will always be the DOM element on which your handlers
is attached -> in your case the li.notification_item
The solution is to identify the element the click occured on - target. There are a lot of ways - in your case you can detect if your click occured in the dropdown navi-link (.dropdown-menu) by traversing the DOM up until the root menu (#notification_items):
$(document).on("click", ".notification_item", function (e) {
// you traverse up to the root ul, and looking if you are in a dropdown menu
if ($(e.target).closest('.dropdown-menu', '#notification_items').length > 0) {
// You are in a drop down menu -> do nothing
} else {
// you are somewhere else -> trigger the modal
$('#notification').modal('show');
}
});
JSFiddle
P.S. this codes checks if you are in a dropdown-menu, you can use specific selector if you want to check for a specific dropdown.
Been doing well so far with MDC Web Components, but I've been hung up here for far too long. (Not strong in JS.)
mdc-select used to be non-native, then used native HTML select, and now once again it's non-native. For a while MDC Web supported a hidden input so that you could pass values to the server.
There's hardly any documentation - mostly just stuck users like me opening issues on GitHub:
Closed: MDC Select - no longer form input compatible #2221
Closed: [MDC Select] Example in README does send values to the web server #5295
Open: [MDCSelect] Add hidden input element to support HTML forms #5428
I need to set/update the value of a hidden input on MDCSelect change for multiple select boxes on the same page... I can get it to do it for ONE select box, but not multiple.
Here is the select box HTML:
<div class="mdc-select mdc-select--outlined region-select">
<div class="mdc-select__anchor demo-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="demo-selected-text" class="mdc-select__selected-text" tabindex="0" aria-disabled="false" aria-expanded="false"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch" style="">
<label id="outlined-label" class="mdc-floating-label" style="">Region</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
<ul class="mdc-list">
<li data-value="" disabled="" aria-selected="false" role="option" class="mdc-list-item" tabindex="0"></li>
<li data-value="north" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">North</li>
<li data-value="east" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">East</li>
<li data-value="south" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">South</li>
<li data-value="west" aria-selected="false" role="option" class="mdc-list-item" tabindex="-1">West</li>
</ul>
</div>
<!-- THIS IS THE HIDDEN INPUT THANK YOU -->
<input type="hidden" id="name2" name="input_name2" value="" class="my_mdc-select__value" />
</div>
I've tried targeting the hidden input with id, name, and even class. I think I need some sort of integrated function, forEach, or loop - tried adding JS beneath each select with no avail. I've worked the examples (seen below) from other users and no success. JavaScript isn't my thing, I know what it supposed to be happening but don't know the function or loop syntax etc to make this work.
I need to make sure each set/update targets the correct hidden input associated with that particular select box.
Here is my JS that works for ONE select box but not multiple:
// Select Menu
import {MDCSelect} from '#material/select';
const selectElements = [].slice.call(document.querySelectorAll('.mdc-select'));
selectElements.forEach((selectEl) => {
const select = new MDCSelect(selectEl);
select.listen('MDCSelect:change', (el) => {
const elText = el.target.querySelector(`[data-value="${select.value}"]`).innerText;
console.log(`Selected option at index ${select.selectedIndex} with value "${select.value}" with a label of ${elText}`);
// this works but only saves one
document.querySelector('input.my_mdc-select__value').value = select.value;
});
});
Here is some code that others used that I haven't been able to modify/apply (taken from links above):
From nikolov-tmw:
document.querySelectorAll( '[data-mdc-auto-init="MDCSelect"]' ).forEach( function( sel ) {
sel.My_MDCSelect__Value = sel.querySelector('input.my_mdc-select__value');
if ( null !== sel.My_MDCSelect__Value ) {
sel.addEventListener( 'MDCSelect:change', function( a ) {
if ( sel.MDCSelect ) {
sel.My_MDCSelect__Value.value = sel.MDCSelect.value;
}
} );
}
} );
From daniel-dm:
<div class="mdc-select">
...
</div>
<input id="pet-select" type="hidden" name="pets">
<script>
const input = document.querySelector('#pet-select');
const select = document.querySelector('.mdc-select');
select.addEventListener('MDCSelect:change', e => {
input.value = e.detail.value;
});
</script>
Please help! This particular issue has been open since January (people struggling long before) with no clear solution to help non-JS developers implement MDCSelect boxes. Thanks in advance!
The problem is here:
document.querySelector('input.my_mdc-select__value').value = select.value;
Document.querySelector will find the first matching element in the whole document, so in your loop you're always accessing the same input element.
Instead, you should run querySelector method on the parent element of each hidden input, which in your loop will look like:
selectEl.querySelector('input.my_mdc-select__value').value = select.value;
I have a search engine code in angular2.
when I select the search results I need to display the values in the text box with cross button next to it.
right now I am getting the results.
but when I type alphabet h in the text box, I see some results but when I select hover, the h alphabet not dissapperaing.
to make it disappear I made the text box value as empty but still not working.
providing my code and stack blitz below
can you please help me.
so that in future I can implement myself.
https://stackblitz.com/edit/angular6-fdwnew?file=app/app.component.ts
add(item){
console.log("item--->", item);
this.tags.push(item);
this.value=''
}
delete(item) {
console.log(item);
this.tags = this.tags.filter(x => x !== item)
//this.tags.push(item);
}
You can change the HTML with ngModel which is two way binding in Angular and I feel you better maintain the independent boxes for the Input entry and list of tags
<div contenteditable="true"
class="border"
#textbox
style="border: 2px solid black; min-height:50px; width:300px;"
id="txtDiv"
(keypress)="updateKeyUp($event)"
>
<!---searchTerm$.next($event.target.value)-->
<div>
<span
class="box-tag"
*ngFor="let tag of tags">
{{tag.name}}
<b class="close" (click)="delete(tag)">x</b>
</span>
</div>
</div>
<input [(ngModel)]="nameModel" (keypress)="updateKeyUp($event)" placeholder="Enter Tag Name">{{this.nameModel}}
<ul *ngIf="results">
<li *ngFor="let result of results | slice:0:9" (click)="add(result)">
<a href="{{ result.latest }}" target="_blank">
{{ result.name }}
</a>
</li>
</ul>
Demo Here