If I have a header on HTML like these:
<li class="nav-item px-1 pt-1">
<a class="nav-link" href="http://localhost/ciblog/">Home</a>
</li>
<li class="nav-item px-1 pt-1">
<a class="nav-link" href="http://localhost/ciblog/Book">Book</a>
</li>
<li class="nav-item px-1 pt-1">
<a class="nav-link" href="http://localhost/ciblog/TestCreate">Create</a>
</li>
and I want to click on "Book", how do it?
Here's what I tried:
await driver.findElement(By.css('a.nav-link')).click();
and I'm understand that won't work because all of them have nav-link class, how do I call the specific value of book? on Selenium IDE you can just input value = Book
You can locate it with XPath:
await driver.findElement(By.xpath("//a[contains(text(),'Book')]")).click();
Or with css selector
await driver.findElement(By.css("a[href*='Book']")).click();
I would say to go ahead with linkText :
await driver.findElement(By.linkText("Book")).click();
Related
how do I have to configure the "Wayfinder" in MODx to get a Bootstrap 5 output. specifically for the "Dropdown Submenue".
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item active">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="#">Project</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">How-To</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</div>
I think it has to be the innerTpl and the innerRowTpl. The normal (level 1 menu) works. Just not the submenu.
How do I have to configure that?
The Wayfinder call:
[[Wayfinder? &startId=`0` &level=`2` &outerClass=`navbar-nav me-auto mb-2 mb-md-0` &rowTpl=`tpl_navigation-menu` &rowClass=`nav-item` &innerTpl=`innerTpl` &innerRowTpl=`innerRowTpl`]]
&rowTpl:
<li[[+wf.id]][[+wf.classes]]><a href="[[+wf.link]]" class="nav-link" title="[[+wf.title]]" [[+wf.attributes]]>[[+wf.linktext]]</a>[[+wf.wrapper]]</li>
&innerTpl and innerRowTpl is still blank.
Did someone have an Idea?
Wayfinder often confusing here unfortunately, please take a look at snippet documentation diagram, it will help you to understand which chunks are used to form menu child elements.
OK,
here is the final solution. (For those who struggels with the Wayfinder-Stuff as me)
[[Wayfinder?
&startId=`0`
&level=`2`
&outerClass=`navbar-nav me-auto mb-2 mb-md-0`
&innerClass=`dropdown-menu`
&rowTpl=`tpl_row`
&parentRowTpl=`tpl_parentrow`
&innerRowTpl=`tpl_innerrow`
]]
Chunk for tpl_row:
<li class="nav-item [[+wf.classnames]]">
<a class="nav-link" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_parentrow:
<li class="nav-item dropdown [[+wf.classnames]]">
<a class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
Chunk for tpl_innerrow:
<li class="[[+wf.classnames]]">
<a class="dropdown-item" href="[[+wf.link]]">[[+wf.linktext]]</a>
[[+wf.wrapper]]
</li>
I want to Click on href "add_record.php" by VBA Excel Selenium.
Inspect of Targeted site:
<li class="active">
<i class="fa fa-dashboard"></i><span>Dashboard</span></li>
<li class=""><i class="fa fa-link"></i> <span>Add New Record</span></li>
<li class=""><i class="fa fa-link"></i> <span>Add Record from SRF Portal</span></li>
<li class=""><i class="fa fa-link"></i> <span>List/Edit/Followup</span></li>
<a href="#">
Just to click this element use css selector. * means finding any text as specified after =.
driver.findElementByCssSelector("a[href*=add_record]").Click
I can't figure out how I have to configure Wayfinder (or pdoMenue) to get this output:
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">
<p>Home</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="articles.html">
<p>Articles</p>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">
<p>About</p>
</a>
</li>
</ul>
Can anybody help me out?
Edit: I have a dropdown too:
<li class="nav-item dropdown">
<a href="index.html#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown">
<i class="now-ui-icons files_paper" aria-hidden="true"></i>
<p>Sections</p>
</a>
<div class="dropdown-menu dropdown-menu-right" aria- labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="sections.html#headers">
<i class="now-ui-icons shopping_box"></i>
Headers
</a>
<a class="dropdown-item" href="sections.html#features">
<i class="now-ui-icons ui-2_settings-90"></i>
Features
</a>
</div>
</li>
It is the free Template Now UI-Kit, and based on bootstrap 4.
[[pdoMenu?
&parents=`0`
&level=`1`
&tplOuter=`#INLINE <ul[[+classes]]>[[+wrapper]]</ul>`
&tpl=`#INLINE <li[[+classes]]><a class="nav-link" href="[[+link]]" [[+attributes]]><p>[[+menutitle]]</p></a>[[+wrapper]]</li>`
&outerClass=`navbar-nav ml-auto`
&rowClass=`nav-link`
]]
Something like this in pdoMenu. Untested, you may have to play around with how the classes get assigned. If you need first and last classes, or a you-are-here class, those are available too and well-documented. https://docs.modx.pro/en/components/pdotools/snippets/pdomenu
I'm trying to place the icon before the text in the navigation button. However, it always appears above.
Also, the icon must be aligned vertically with the text.
This must be really easy to correct but can not figure it out.
Any feedback is highly appreciated.
What should look like:
What happens:
.nav-link {
display: inline-block;
}
<ul class="navbar-nav mx-auto w-100">
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4>Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4>Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4>Test 3</h4>
</a>
</li>
</ul>
You need to add class="d-inline" to your h4 elements like so:
<ul class="navbar-nav mx-auto w-100">
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">Test 1</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/contractors" routerLinkActive="active" style="display:block">
<img src="/assets/icons/B_Toolbox_Gray.svg" class="iconos" alt="toolbox">
<h4 class="d-inline">Test 2</h4>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/backoffice/jobs" routerLinkActive="active">
<img src="/assets/icons/B_Hammer_Gray.svg" class="iconos " alt="hammer">
<h4 class="d-inline">Test 3</h4>
</a>
</li>
</ul>
h4s (and h1s etc.) are normally block level elements that's why they wrap.
Trying to create a Bootstrap menu with WayFinder. How to finish it?
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="drop1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="drop2">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
My WayFinder call so far:
[[Wayfinder? &startId=`0` &level=`1`
&hideSubMenus=`TRUE` &includeDocs=`1,2,3,4,5,55,7,8,74`
&outerTpl=`chunk_navigation-menu`]]
And my chunk_navigation-menu looks like this:
<ul class="navbar-nav nav">[+wf.wrapper+]</ul>
First of all, I am assuming you are using MODX Evolution.
The easiest way to do that is using
&outerClass
&parentClass
&innerClass
&parentRowTpl
In your Wayfinder call.
It should look like this:
[[Wayfinder? &startId=`[(site_start)]` &level=`2` &outerClass=`nav navbar-nav` &parentClass=`dropdown` &innerClass=`dropdown-menu` &parentRowTpl=`navbar_parentRowTpl`]]
Note: If you don't use [(site_start)] in your context(s), replace it with your menu's parent resource ID.
Also in this case you would have to create the navbar_parentRowTpl. This chunk should look like this:
<li[+wf.id+][+wf.classes+] class="dropdown" id="menu[+id+]">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#menu[+id+]" href="[+wf.link+]" title="[+wf.title+]">
[+wf.linktext+]
<b class="caret"></b>
</a>
[+wf.wrapper+]</li>
As it's been a long time I don't work with Evo, if there is some problem with this code let me know and I can help you.
I used this example as reference: https://gist.github.com/mkay/f0afc97ec1536932e0a3
And used this table to convert to the Evo syntax:
https://rtfm.modx.com/revolution/2.x/making-sites-with-modx/tag-syntax