webdriver - how to select a link from within a list - webdriver

this is the source - the link is within an unordered list (Configuration) and the item I want to click on is KPI Types - how with webdriver?
<div id="headerList">
<div id="wrap">
<div id="meta">
</div>
<div id="page">
<div id="header">
</div>
<div id="nav">
<ul class="sf-menu">
<li>
</li>
<li class="secondary">
</li>
<li class="secondary">
</li>
<li>
</li>
<li>
Configuration
<ul>
<li>
Validation
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
KPI Types
</li>
</ul>
</li>
</ul>
</div>
<h1>Kpi</h1>
<div id="messages"></div>
and the link has text KPI Types

If I understand you correctly...
By Text: KPI Types
By XPath: //a[text()='KPI Types']
In c#:
driver.FindElement(By.LinkText("KPI Types")).Click();
driver.FindElement(By.XPath("//a[text()='KPI Types']")).Click();
Or if you want to restrict it specifically to the Configuration list:
By XPath: //li[text()='Configuration']//a[text()='KPI Types']
In c#:
driver.FindElement(By.XPath("//li[text()='Configuration']//a[text()='KPI Types']")).Click();
Does that answer your question?

Related

How to add link to a collapsible item in a dropdown menu in Bootstrap 5?

I need to be able to add a link to "Home" and "Pages" when clicking it but also to collapse and show the li items from below.
I changed "#homeSubmenu" from a href with a link but when clicking it does not collapse.
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
Use data-bs-target for the Collapse and href for the link..
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>

Bootstrap 4 sidebar layout not aligning well

Working on an Angular SPA whereby am using bootstrap as my css framework. I have created different components and included them in the main app.component.html file. All are aligned properly except the bootstrap 4 sidebar,, I need it to be fixed and should be on the far-left of the screen.
The problem is that it pushes the main body down..
<!--Include Navbar which works well-->
<app-navbar></app-navbar>
<div class="container">
<!-- include sidebar-->
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
</div>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Home 1
</li>
<li>
Home 2
</li>
<li>
Home 3
</li>
</ul>
</li>
<li>
About
</li>
<li>
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>

Is this the correct implementation of the BEM naming convention for navigation?

I am trying to implement a main menu (including sub menu) for a website using the BEM CSS naming convention. I have found myself nesting elements which I think is an antipattern of the convention?
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group__list">
<li class="nav__group__item">
<a class="nav__group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
It's always though to nest deep. You can not have Element of Element in the BEM methodology. So this nav__group__list is not correct, could be nav__group-list for example.
The correct BEM markup could look something like this.
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="nav__group">
<h3>Nav group</h3>
<ul class="nav__group-list">
<li class="nav__group-item">
<a class="nav__group-link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
However you can separate the "Group list", especially if it can be reused elsewhere in your project.
Your menu with separated links-group Block would look something like this:
<ul class="nav">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav__submenu">
<div class="links-group">
<h3 class="links-group__heading">Nav group</h3>
<ul class="links-group__list">
<li class="links-group__item">
<a class="links-group__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
I've been there and I know what you're trying to do - avoid styling by nesting for every price. Believe me it's not the way. Try to keep it simple, don't be afraid of making elements intended to be nested inside the other but don't use second-level nesting in your naming to avoid "really__long__class__names" and renaming everything in case you want to change the HTML structure. Think of BEM as a method of isolating components, breaking a complex UI into simple chunks easy to understand and maintain. In you specific case I'd probably go with something like this:
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Main item</a>
<div class="nav--submenu">
<div class="nav__group">
<h3 class="nav__header">Nav group</h3>
<ul class="nav__list">
<li class="nav__item">
<a class="nav__link" href="#">Nav item</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</nav>
Than I'd add a different styling for elements nested inside .nav--submenu. What you do want to avoid is cross-nesting between blocks, but inside them go with whatever feels right and if the block is getting too complex, think of extracting it's part to a new one.

CSS selector within stacked lists

I am trying to style the nav in a template theme that I neither wrote nor picked. The nav uses lists in its structures and the children at various levels have the same class. I'm hoping someone can help me find the right CSS selector to pick the third level down. Here is the basic structure:
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
What I need to do is grab the 3rd level down (called Mowers in example).
My ultimate goal is to style this level and move it vertically but first I need to be able to modify only that level with CSS.
This is a new site but I can provide the real site URL if that would help.
jc
You can try this
.subitemLink[title~="mowers"] {
font-size:20px;
}
<nav class="nonbounce desktop vertical">
<ul>
<li class="item sub active">
<a class="itemLink" href="https://sitename/tools/" title="Tools">Tools</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://sitename/tools/outdoors/" title="Outdoors">Outdoors</a>
<ul class="subnav">
<li class="subitem">
<a class="subitemLink" href="https://www.safenready.net/tools/outdoors/mowers/" title="mowers">Mowers</a> THIS ONE!!!
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>

Two side by side divs that will go to single column in mobile view x2

I have a page where I want to display four 5-item ordered lists. I want to display this in sort of a 2x2 table fashion, but have all 4 of these lists go to a single column in mobile view.
I am currently using float:left to display this and then using float:none in my mobile.css to get the single column display I desire.
Here is the jsfiddle example.
This look OK?
(Here is HTML. Please see JSFiddle above.)
<div style="width=100%;overflow:hidden;">
<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Fruit</strong>
<ol>
<li>Apples </li>
<li>Oranges </li>
<li>Pears </li>
<li>Lemons </li>
<li>Limes </li>
</ol>
</div>
<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Veggies</strong>
<ol>
<li>Carrots </li>
<li>Peas </li>
<li>Corn </li>
<li>Peppers </li>
<li>Cucumber </li>
</ol>
</div>
</div>
<div style="width=100%;overflow:hidden;">
<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Meats</strong>
<ol>
<li>Bacon </li>
<li>Chicken </li>
<li>Pork </li>
<li>Beef </li>
<li>Turkey </li>
</ol>
</div>
<div class="foodlist" style="float:left;min-width:250px;padding:10px 0 10px;">
<strong>Desserts</strong>
<ol>
<li>Apple Pie </li>
<li>Chocolate Cake </li>
<li>Brownies </li>
<li>Ice Cream </li>
<li>Pastries </li>
</ol>
</div>
</div>
Or U can make width of blocks =100% after #media.

Resources