I am running some acceptance tests in Yii2 using Codeception version 2.0.16. My Unit tests and functional tests work perfectly, but the acceptance tests seem to be showing a weird result. I have the following acceptance tests defined:
I->wantTo('test link discovery');
$I->seeElement(Locator::href('/index-test.php/user/create'));
$I->seeLink('Create User');
Now the 'href' and the link text refer to the same link. But when I run this, I get the following error:
1) Failed to test link discovery in UserCept (/var/www/localhost/<mysite>/tests/codeception/acceptance/UserCept.php)
Couldn't see link "Create User": Element located either by name, CSS or XPath 'a' was not found on page.
Scenario Steps:
12. I see link "Create User"
11. I see element "//a[#href=normalize-space('/index-test.php/user/create')]"
As you can see, the Locator function finds the link, but the "seeLink" request fails. This is quite surprising; here is the actual page returned:(partial from '_output' results page "UserCept.fail")
...
<body>
<div class="wrap">
<nav role="navigation" class="navbar navbar-fixed-top" id="w1"><div class="container"><div class="navbar-header"><button data-target="#w1-collapse" data-toggle="collapse" class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>NGO Review</div><div class="collapse navbar-collapse" id="w1-collapse"><ul class="navbar-nav navbar-right nav" id="w2"><li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Login</li></ul></div></div></nav>
<div class="container">
<ul class="breadcrumb"><li>Home</li>
<li class="active">Users</li>
</ul> <div class="user-index">
<h1>Users</h1>
<p>
Create User </p>
<div class="grid-view" id="w0"><div class="summary">Showing <b>1-2</b> of <b>2</b> items.</div>
<table class="table table-striped table-bordered"><thead>
<tr><th>#</th><th><a data-sort="username" href="/index-test.php/user/index?sort=username">E-Mail Address</a></th><th><a data-sort="first_name" href="/index-test.php/user/index?sort=first_name">First Name</a></th><th><a data-sort="last_name" href="/index-test.php/user/index?sort=last_name">Last Name</a></th><th><a data-sort="last_login_time" href="/index-test.php/user/index?sort=last_login_time">Last Login Time</a></th><th class="action-column"> </th></tr>
</thead>
...
(key code is Create User)
Obviously I can use the Locator syntax to run the tests, but I would very much appreciate it if someone can explain why the Locator function works correctly, but the "seeLink" fails? Thanks.
Related
I have a Bootstrap v5 site I'm trying to make accessible. The navbar has the company logo that links to the home page, but also a nav link "Home" that also links to the home page. WAVE evaluation tool triggers a warning for "Redundant link" since they go the same place and are next to each other.
The code:
<nav class="navbar navbar-expand-lg" aria-label="Main navigation">
<div class="container">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="/">
<img src="/Images/company_logo.png" alt="Company logo">
</a>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
<li class="nav-item"><a class="nav-link" href="/home/about">About</a></li>
<li class="nav-item"><a class="nav-link" href="/home/contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
The obvious solutions are:
Solution 1: Remove the logo link. But everything I read is that it's a best practice to have your logo be a home page link.
Solution 2: Remove the Home link. But for accessibility I hear you should include a Home link in the navigation.
Solution 3: Somehow combine the logo and Home nav-item into a single link, but not sure how Bootstrap would support that especially in mobile view.
Solution 4: Ignore it, it's a WAVE "Alert" not a "Warning".
I'm leaning towards Solution 1; it seems to be the most accessible.
What would you do?
Solution 1: It's pretty common to have a logo be a link to the home page. It's fine to keep it.
Solution 2: There is nothing in the Web Content Accessibility Guidelines (WCAG) that says you must have a "Home" link in the navigation menu. It's a pretty common thing to have but is not required. You could remove it if you wanted to but don't do it for any accessibility reasons. Remove it if it doesn't fit with your design, otherwise keep it.
Solution 3: Often there are elements between the company logo and the first menu item with the "Home" link (such as a login link or search button) so combining the links could be very messy. There's no need to pursue this route.
Solution 4: Absolutely, except it's a Warning, not an Alert. You had it backwards. WAVE is just being proactive and pointing out usability issues that could affect some users but it's not an accessibility (WCAG) failure. It's fine to ignore this Warning if you're happy with your design.
I create a web application based on ASP .Net Core and Angular. I also use the Bootstrap library. I wanted to add an extension to Bootstrap - Bootstrap Essentials. The problem is that the classes from this library don't work for me. I downloaded the extension using the command npm install bootstrap-essentials . Then I added the styles and scripts file paths (in the angular.json file).
This is what the paths to the needed files in angular.json look like:
My goal was to use the library to make a side slide for mobile devices. I copied the code from the documentation (I didn't change anything).
Documentation code:
<nav class="navbar navbar-default navbar-fixed-top navbar-slide-nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-right" data-toggle="offcanvas" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-slide offcanvas">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
According to the documentation, I should get such a bar after pressing the hamburger button:
But instead I get this:
It looks like the style and script file is not visible to Angular.
I looked at the folders and the files are actually there. The strange thing is that when using classes from pure Bootstrap everything works fine. This additional library does not work. I don't get any errors or warnings in the console on the browser. Additionally, when compiling with ng serve --open, it doesn't show any errors (so the given paths are valid because they exist). Any ideas what could be wrong?
I have read the documentation (bootstrap-essentials) of the Bootstrap extension in more detail. It turns out that this extension was written with Bootstrap 3 in mind. It is not compatible with 4 (Bootstrap 4 is in my project). I have downgraded to Bootstrap 3 and it actually works with that version.
I'm having a strange behavior with using bootstrap's navbar nav. I have normal text and a label span in one of the navigational elements and the span sometimes ends up in new line thus rendering whole navbar higher than it should be. The strangest thing is that it happens only occasionally (~50% of the time), but without me changing any conditions (same screen size, same page/content, etc.). Also, I was only able to reproduce this in Chrome not in Firefox.
As soon as I use dev-tools to adjust any css settings, the span jumps back in place, so I'm really out of idea how to debug or experiment with fixes.
Any ideas or suggestions on:
how to debug the issuse?
what could be the cause?
Here is how it looks broken:
and how it should be:
And here is excerpt of my header. Unfortunately I have a lot of code in the full header (and it's an angular app some things are controlled dynamically), so I'm not fully excluding the possibility that the problem is somewhere else, but I'm having hard time reproducing it regularly with the full code, so I didn't think making a plunker case would be easy.
<header class="navbar navbar-default navbar-fixed-top ng-scope">
<nav class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="divider-vertical hidden-xs"></li>
<li id="home-button">
Home
</li>
<li id="library">
<a href="/library">Library
<span class="small label label-primary label-super">new</span>
</a>
</li>
</ul>
</nav>
</header>
I have page with various accordions on. Some of these accordions reference content in another accordion on the page, my question is how do I make it so that the in the first accordion expands the other accordion.
I cant seem to get it to work.
I have set the link up as Test
And on the first <p> under the <div class="panel-body"> as <p id="SubTitle2">Content</p> but this does nothing at all.
Am I putting it in the wrong place or am I going about it completely wrong?
Below is my complete code
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseOne" data-toggle="collapse">Heading 1</a>
</h3>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<p>Test</p>
</div>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseTwo" data-toggle="collapse">Heading 2</a>
</h3>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p id="SubTitle2">Content</p>
</div>
</div>
</div>
</div>
If you're inclined to use jQuery for this, you could do the following:
$('#SubTitle2').click(function(){
$('#collapseTwo').collapse('show');
});
...having the anchor setup something like this:
Test
You can test it out here: http://www.bootply.com/jQMOup05vG
by using data-target you can achieve this as
<a data-toggle="collapse" data-target="#id_to_expand">click</a>
hope this will help you
Managed to get it working by mixing the answers from Nasir Mahmood and webeno.
Basically I mixed and matched both solutions and it works. My code is now:
<p><a class="collapsed"
href="#SubTitle2"
data-toggle="collapse"
data-target="#collapseTwo">Test
</a></p>
As you are not able to mark responses as answer I will add a comment on them both
None of the answers submitted previously are acceptable for my situation. I don't know ahead of time which links exist on the page, and which links will necessitate expanding collapsed sections. I also have nested collapsible sections. Also, I want the expansion to occur if someone links into the page from another document. So I settled on a solution that detects dynamically what sections must be opened. When a click on a link I care about happens, the handler:
Finds all parents of the target which are collapsed sections. ($(target).parents(".collapse:not(.in)").toArray().reverse();)
Starting with the outermost parent, it requests that the element be expanded. (These are the calls to next(). The call $parent.collapse('show'); is what shows a parent.)
Once an element is expanded, it expands the next parent (closer to the link target). (if (parents.length)...)
Until finally it requests that the target be scrolled into view. (target.scrollIntoView(true);)
I've initially tried walking the DOM tree in the reverse order, from innermost parent to outermost, but I got strange results. Even compensating for event bubbling, the results were inconsistent. The request for scrolling to the target is necessary as it is likely that the browser will have scrolled the window before the sections are expanded.
Here's the code. win and doc are set to the Window and Document instance that actually hold the DOM tree being processed. Since frames may be used, just referring to window and document ain't okay. The root variable is an Element that holds the part of the DOM I care about.
function showTarget() {
var hash = win.location.hash;
if (!hash)
return;
var target = doc.getElementById(hash.slice(1));
if (!target)
return;
var parents =
$(target).parents(".collapse:not(.in)").toArray().reverse();
function next(parent) {
var $parent = $(parent);
$parent.one('shown.bs.collapse', function () {
if (parents.length) {
next(parents.shift());
return;
}
target.scrollIntoView(true);
});
$parent.collapse('show');
}
next(parents.shift());
}
win.addEventListener('popstate', showTarget);
$(root).on('click', 'a[href]:not([data-toggle], [href="#"])',
function (ev) {
setTimeout(showTarget, 0);
});
showTarget();
Notes:
The selector a[href]:not([data-toggle], [href="#"]) limits event listening only to those a elements that are actually hyperlinks into the rest of the document. Sometimes a is used for other purposes. For instance, those a elements that have a data-toggle attribute or have href="#" are not used for navigating through the page.
setTimeout(showTarget, 0) allows the default action for a click on a hyperlink to happen (i.e. the hash changes) first, and then showTarget is called. This works everywhere except FF. A few tests show that showTarget won't see the change on FF unless the timeout is raised. 0ms does not work, 1ms did not, and 10ms works. At any rate, I'd rather not hardcode some FF-specific value that may change in the future so we also listen on popstate` to catch those cases that would not be caught on FF.
The explicit call to showTarget() is necessary for cases when the page is loaded with a URL that has a hash.
I've tried an implementation that listened only on popstate but it proved unreliable due to how Chrome and FF differ in how they generate popstate. (Chrome generates it whenever a link is clicked, even if the hash does not change. FF generates it only when the hash changes.)
The code above has been tested in Chrome (39, 38, 36), FF (31), and IE (10, 11).
you have set panel-group id=accordion twice. Thats not good.
Wrap your two panels into one panel-group-block with one id:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseOne" data-toggle="collapse">Heading 1</a>
</h3>
</div>
<div class="panel-collapse collapse" id="collapseOne">
<div class="panel-body">
<p>Test</p>
</div>
</div>
</div>
<!-- SNIP
</div>
<div class="panel-group" id="accordion">
SNAP -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
<a class="accordion-toggle collapsed" data-parent="#accordion" href="#collapseTwo" data-toggle="collapse">Heading 2</a>
</h3>
</div>
<div class="panel-collapse collapse" id="collapseTwo">
<div class="panel-body">
<p id="SubTitle2">Content</p>
</div>
</div>
</div>
</div>
I created a website using bootstrap, mainly for learning purposes. I am using the <div class="navbar navbar-inverse">. I put my website onto a server and asked some of my buddies to check it out. Everyone called and said it looked great but then one said everything was jumbled around when he used Internet Explorer (don't know exactly what version but definitely an older one) I tried it out on internet explorer and the nav bar was jumbled.
The List items were not inline. The bar was twice as big as it should be, and the text was underlined and purple...
I have been trying to fix this issue for the past couple of days but I just can't. How should I go about making my website act similar enough in every browser so it doesn't look broken?
It is really frustrating, and I am ready to accept any sources for 1. learning about this and 2. fixing this issue.
Thanks!
Code for HTML:
<html>
<head>
<!--[if lt IE 9]-->
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<!--[endif]-->
<title> College GPA </title>
<link rel = 'stylesheet' type = 'text/css' href = "assets/css/style.css">
<link rel = 'stylesheet' type = 'text/css' href = 'assets/css/bootstrap.min.css'>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script src = "assets/js/dropdown.js">
</script>
<script>
$(".dropdown-toggle").dropdown();
</script>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#" style = "font-size: 23px;">LOGO</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class = "nav">
<li class = 'active'> Home </li>
<li class = 'dropdown'>
Drop Down <b class = 'caret'> </b>
<ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
<li> Drop Down 1 </li>
<li> Drop Down 2 </li>
<li> Drop Down 3 </li>
</ul>
</li>
<li class = 'dropdown'>
Drop Down <b class = 'caret'> </b>
<ul class = 'dropdown-menu' role = 'menu' aria-labelledby="dLabel">
<li> Drop Down 1 </li>
<li> Drop down 2 </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class = 'wrapper'>
</div>
</body>
</html>
It doesn't help much that you don't know what version he was using... perhaps you should ask him? If it's old enough it's possible that bootstrap just doesn't support it (IE < 7).
If that's the case, just ignore it. Few companies still support older versions of IE, and those that do tend to have a specific reason.
If you're looking for a good way to deal with old browsers, perhaps you could display an option to upgrade to a newer browser, and a warning that it may not display properly in their browser.
http://gs.statcounter.com/ is a good source to get usage statistics of older browsers. From there you can decide if you really want to support them.
Finally, you can always look at analytics for your site (if you happen to have an existing one with traffic) to see if maintaining support for an older browser is worth your time.