I am very new to automation testing and looking for help to identify panel that is in collapsed state which I need to open to fill in details for form fields inside that panel.
I am trying with below xpath locator:
browser.findElement(by.className('panel-heading collapsed')).click();
Please let me know if I am doing it in a right way.
Webpage code:
<div class="panel-heading collapsed" id="menu-toggle2" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo1" ng-click="tooglePanel('collapseTwo1')" role="button" tabindex="0" aria-expanded="false">
<h4 class="panel-title">
<a class="accordion-toggle panel-heading collapsed" id="menu-toggle2" data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo1" aria-expanded="false">
<strong class="ng-binding">COMPANY DETAILS</strong>
</a>
</h4>
</div>
The problem with the selector you are using is that there are multiple elements using the classes panel-heading collapsed. You need something more unique. In this case I would probably use the ng-click() attribute on this element. Something like the following should work:
browser.findElement(by.css('div[ng-click="tooglePanel('collapseTwo1')"]').click();
Another option is to use link text:
browser.findElement(by.linkText('COMPANY DETAILS').click();
Related
I have the following code inside my asp.net mvc core web application + bootstrap 4.0, which show a FAQ question:-
#foreach (var item2 in Model.OrderBy(a => a.Description))
{
<div class="card">
<div class="card-header" id="#item2.Id+'headingTwoa'">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse"
data-target="##item2.Id" aria-expanded="false"
aria-controls="collapseTwo">
#Html.DisplayFor(modelItem => item2.Description)
</button>
</h5>
</div>
<div id="#item2.Id" class="collapse" aria-labelledby="headingTwoa"
data-parent="#accordion" style="">
<div class="card-body">
#Html.Raw(item2.Answer)
</div>
</div>
</div>
}
but the problem i am facing is that the question description will spell out of screen on small sized screens, while the answer text will align to the screen size.. so not sure how i can force the button text to span multiple lines on small sized screens?
Edit-1:-
Here is a markup for a question which spells out of page layout on small sized screens:-
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#1004" aria-expanded="false" aria-controls="collapseTwo">
What services are being provided? What if my practice is already performing these services?
</button>
https://prnt.sc/t3ptin From Bootstrap's official website -> I just added text to the button and it automatically spans on multiple lines
Please, provide screenshots of an actual webpage and HTML code not from your ASP.NET but from the "elements" tab of the browser. I believe you just have a really big word.
If so, check this link(interactive) https://developer.mozilla.org/ru/docs/Web/CSS/word-break
Edit 1
Just copypasted your button into exact same component on the bootstraps website(https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example) - https://prnt.sc/t3t7k6 Still works as expected.
It is still hard to give you a clear answer...
I will suggest two things:
try too add a btn-block class to your buttons
provide screenshots of what you have now and also screenshots of the computed props tab https://prnt.sc/t3t9rr 1) select your button 2) switch to computed tab 3) share all the props that browser applies to your button, maybe there is something custom
I am having issues formatting my drop down list. Code is as follows.
<div class="row" id="row02">
<div class="dropdown" id="meters-toggle-container">
<button class="btn btn-default dropdown-toggle" type="button" id="metter-dropdown-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Meters
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="meters-dropdown-ul" aria-labelledby ="metter-dropdown-btn">"></ul>
</div>
</div>
List Items are appended via Jquery depending upon an ajax request/response.
var html = "<li><a href='#'>" + meterNumber + "</a></li>"
$("#meters-dropdown-ul").append(html);
After reviewing several css options I have found one that seems to control the width of the drop down how I would like it. I am having dificulty of 1) containing the drop down inside of its row parent and 2) setting the menue to overflow so that it can be scrolled through.
As you can see in the picture bellow. The dropdown menu not onlyy runs past its parents boundaries about 50% of the page but runs off the page as well not allowing to view whats beyond.
as cake3 is using foundation framework, how can I use the reveal moadl function?
I tried simply copy and paste this to my view:
<p><a data-open="exampleModal1">Click me for a modal</a></p>
<div class="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
But when I test it, I don't get any error but also the div is visible and not hidden and the "Click me for a modal" does also nothing.
Do I need to include any further files on order to use this in cake?
I have used Knockout.js and added a click event to a href on the navbar of a site I'm working on. The click event works but one of the unfortunate side effects is that the navbar doesn't automatically close when using it on a mobile device.
Is there a way to "force" bootstrap to close the navbar after the Knockout function has completed?
--Updated--
I have tried returning true from the function in the ViewModel, and also from the function declaration on the href element, i.e.
My Bookings
but to no avail - the nav bar still refuses to close. I've also tried using a button in the navbar instead of a href element but it still does the same. Problem can be replicated if you shrink a desktop web browser right down so that the site goes "into" mobile mode (I know, I know).
Any ideas?
This is a simple solution... But it works
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
add this where you want to trigger collapse...
$('button[data-toggle]').click()
Boostrap3 uses this code to make a toggle button within a navbar in mobile view, but why don't just use a image instead of empty elements?
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
http://getbootstrap.com/components/#navbar
Most likely to maintain a "forward" thinking approach to web design. There's no reason to make an unnecessary media request if the same visual effect can be achieved using only html and css. Similarly, the advancement in css has allowed transitions that were once only possible with javascript or flash.
If you inspect the html of that mobile menu icon, it is pretty apparent what it is doing and how the loading of even a small image takes more processing than a small amount of markup. Succinctly, it is just a better approach at modern design.