Level 19
Have you tried keeping the anchor text (good for accessibility) but hiding it:
<a class="btn btn-info" href="/users.php">
<i class="fa fa-users"></i> <span class="hidden">Users</span>
</a>
Jan 4, 2015
5
Level 6
how to test icon links
I want to test some links without text and with some icon by codeception Webdriver module and phantomjs . the normal links with text found with:
$I->seeLink('users','/users.php');
how to test links with icons not text like this :
<a class="btn btn-info" href="/users.php">
<i class="fa fa-users"></i>
</a>
Level 6
@sitesense why I need to create span and hide it ?
Level 19
@AlnourAltegani You don't, it's just an option with some advantages.
Your tests should find the links as they do with the normal text links.
Screen readers should be able to make more sense of the links.
Anchor text is good for SEO.
If you decide at a later date that you want to show the anchor text, just change a line in your css, although you may want to use a custom class rather than the built in Bootstrap class.
1 like
Level 6
thank you @sitesense . but what if I want to assert some link contain some icon with tests ? how ?
Level 19
Maybe like this instead:
$I->seeElement('a', 'href' => '/users.php');
or even:
$I->seeElement('a .btn .btn-info', 'href' => '/users.php');
Sorry, untested, I'm not sure of the exact syntax but I'm sure you can look it up in the documentation :)
1 like
Please or to participate in this conversation.