I am using protractor 5.2.2. I have to locate a dropdown element by using its sting name.So i have tried with below code,but its not working.
element(by.xpath("//content[contains(string(), 'Learn more')]")).click();
or
element(by.xpath("//div[contains(string(), 'Learn more')]")).click();
The UI code is given below
<div jsname="YCbqLe">
<div jsaction="aLn7Wb:kbDuhe">
<div role="listbox" aria-expanded="false" class="Ej ljmwzf" jscontroller="YwHGTd" jsaction="click:cOuCgd(LgbsSe); keydown:I481le; keypress:Kr2w4b; mousedown:UX7yZ(LgbsSe),npT2md(preventDefault=true); mouseup:lbsD7e(LgbsSe); mouseleave:JywGue; touchstart:p6p2H(LgbsSe); touchmove:FwuNnf; touchend:yfqBxc(LgbsSe|preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd(LgbsSe); focus:AHmuwe; blur:O22p3e;b5SvAb:TvD9Pc;" jsshadow="" jsname="HvyTdb" aria-label="Add a button (optional)">
<div jsname="LgbsSe" role="presentation">
<div class="EI" jsname="d9BH4c" role="presentation">
<div class="Di LMgvRb y3" jsname="wQNmvb" jsaction="" data-value="" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="BOOK" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="ORDER" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="SHOP" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb bf" jsname="wQNmvb" jsaction="" data-value="LEARN_MORE" aria-selected="true" tabindex="0" role="option">
<div class="qm he" jsname="ksKsZd"></div>
<content class="u5 jh">
"Learn more"
</content>
</div>
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="SIGN_UP" aria-selected="false" tabindex="-1" role="option">
<div class="Di LMgvRb" jsname="wQNmvb" jsaction="" data-value="GET_OFFER" aria-selected="false" tabindex="-1" role="option">
</div>
</div>
How can i select the the drop down text "Learn more" here, using the text 'Learn more'.Thanks in advance
you can also use the css locator as below
element(by.cssContainingText("content", "Learn more"))
or with Xpath
element(by.xpath("//*[text()='Learn more']")
Looks like the text have some space. You can copy the complete text between tags and use that in that above xpath or can try the below example
//content[normalize-space(text())='Learn more']
or you can try this css
element(by.css("div[data-value="LEARN_MORE"] content")
Try this xpath to locate the element. If click is not working out, probably this element does not have click action.
//content[contains(text(), '"Learn more"')]
You may try invoking the click action for either one of the below.
//div[#data-value="LEARN_MORE"]
or
//div[#data-value="LEARN_MORE"]/div
Related
i have this code in tailwind
#foreach($studenti as $student)
<a data-modal-toggle="defaultModal" data-target="#myModal{{$student->id }} href="#" class="hover:text-blue-700">{{$student->name}}</a>
and this is the Main modal
<!-- Main modal -->
<div id="myModal{{$student->id}}" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center">
<div class="relative p-4 w-full max-w-2xl h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div class="flex justify-between items-start p-4 rounded-t border-b dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
{{$alum->nombre}} {{$alum->apellpatern}} {{$alum->apellmatern}}
</h3>
<button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-toggle="defaultModal">
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
</p>
<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
<button data-modal-toggle="defaultModal" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</button>
<button data-modal-toggle="defaultModal" type="button" class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">Decline</button>
</div>
</div>
</div>
</div>
#endforeach
But when i pressed the link it does not work, i am using data-target="#myModal{{$student->id }} in order to pass #student data to tailwind Main modal id="myModal{{$student->id}}",
it seems that this is not the proper way to pass data, i am using Laravel 8, anyhelp is appreciated
Thank you in advance
Omar
I am using scala play framework.
On my scala.html page I am trying to loop through a list using a map function
In each loop I want to call an included page.
{profilesvm.profiles.map(profile=>{
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
#cards(profile)
</div>
}
Right now the #cards is coming out printed as straight text. instead of pulling the code.
Do I need to put something around the words #cards to make it run as scala?
Just had to adjust brackets.
<div class="col-md-10 col-sm-8 col-xs-12 ">
#featuredProfiles.map{profiles=>
<div id="featured-profiles" >
<div class="list col-xs-12">
#for(p <- profiles.profiles){
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 list-inside">
#cards(p){
}
</div>
}
}
</div>
</div>
I am using bootstrap vue to create a dropdown but i can't apply scoped style on it because the main button is being created without the "data-v-XXX" attribute.
is there any workaround?
<b-dropdown id="ddown2" variant="link" toggle-class="btn-clean">
<b-dropdown-item-button>test 1
</b-dropdown-item-button>
<b-dropdown-item-button>test 2
</b-dropdown-item-button>
</b-dropdown>
<style scoped>
.btn-clean {
color: #337ab7;
}
</style>
Generated code:
<div id="ddown2" class="btn-group b-dropdown dropdown" data-v-25a41064="">
<button id="ddown2__BV_toggle_" aria-haspopup="true" aria-expanded="false" type="button" class="btn btn-link dropdown-toggle btn-clean">test1</button>
<div role="menu" aria-labelledby="ddown2__BV_toggle_" class="dropdown-menu">
<button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test1
</button><button role="menuitem" type="button" class="dropdown-item" data-v-25a41064="">test2
</button>
</div>
</div>
without "data-v-25a41064" on the button id="ddown2__BV_toggle_"
I came across the same issue today. It helped for me if I put the styling a component higher.
Vue-loader only applies scoped styles to the root element of child components.
You need to use the /deep/ CSS selector to target inside child components.
See docs at https://vue-loader.vuejs.org/guide/scoped-css.html#child-component-root-elements
ngFor don't seem to work for me with ngfor when the flex direction is "row", I mean it works but it puts the items on top of each other instead of side by side
<FlexboxLayout class="itemWindow" *ngFor="let imageUrl of matchItems"
flexDirection="row">
<StackLayout class="inventoryImage">
<Image width= "80" height="80" stretch="aspectFill"
left="5" src="{{imageUrl}}" ></Image>
</StackLayout>
</FlexboxLayout >
What am I doing wrong ? is there another way to do it? I tried with DockLayout but same thing is happening.
I don't have your components so I used divs, but the idea is pretty much the same.
<div fxLayout="row"> <!-- extra container with row layout -->
<div class="itemWindow" *ngFor="let imageUrl of matchItems">
<div class="inventoryImage">
<div width= "80" height="80" stretch="aspectFill"
left="5">{{imageUrl}}</div>
</div>
</div>
</div>
I just added div tag before listItem and added *ngFor to it instead of FlexboxLayout. And it works
<FlexboxLayout flexDirection="row">
<div *ngFor="let filterItem of activityFilters">
<Label flexGrow="1" class="text-center" [text]="activityFilter[filterItem]"> </Label>
</div>
</FlexboxLayout>
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.