On users.html, there is the main and industries tab.
When I load users.html I want industries tab to load. how do I do it?
<div class='tabs-x tabs-above tabs-krajee'>
<ul id="myTab-tabs-above" class="nav nav-tabs" role="tablist">
<li class="active">
Main</li>
<li>Industries</li>
</ul>
<!-- Tab content refers to this part -->
<div id="tabs-content" class="tab-content">
<div id="home-tabs" class="tab-pane fade in active">
<div th:include="fragments/admin/companyProfile::companyProfile(${currentAccountant})"></div>
</div>
<div id="users-tabs" class="tab-pane fade">
<div th:include="fragments/admin/users::users">a</div>
</div>
</div>
</div>
Following code loads userDetails but I want a specific tab to be selected on loading. How do I do it?
#RequestMapping(value = "/load", method = RequestMethod.GET)
public ModelAndView load() {
ModelAndView modelAndView = new ModelAndView();
modelAndView.setViewName("userDetails");
return modelAndView;
}
You need to trigger tab show on document load.
Check documentation
<div class='tabs-x tabs-above tabs-krajee'>
<ul id="myTab-tabs-above" class="nav nav-tabs" role="tablist">
<li class="active">
Main</li>
<li>Industries</li>
</ul>
<!-- Tab content refers to this part -->
<div id="tabs-content" class="tab-content">
<div id="home-tabs" class="tab-pane fade in active">
<div th:include="fragments/admin/companyProfile::companyProfile(${currentAccountant})"></div>
</div>
<div id="users-tabs" class="tab-pane fade">
<div th:include="fragments/admin/users::users">a</div>
</div>
</div>
</div>
<script th:inline="javascript">
var tabToSelect = "users-tabs";
$(document).ready(function() {
$('#myTab-tabs-above a[href="#'+tabToSelect+'"]').tab('show')
});
</script>
You are not specified that which tab to select. How do you want to separate the logic for adding Main and industries.
In Controller
if you want to show MainTab
modelAndView.addObject("mainTabAddOrNot","show");
otherwise
modelAndView.addObject("mainTabAddOrNot",null);
In Thymeleaf side:
<li th:if="$(mainTabAddOrNot)" >
Main</li>
<li>Industries</li>
It is just an example to give an idea to use conditions in thymeleaf for specific tag adding. Hope it will give you an idea.
There is no need to change your controller code neither javascript. Just set your tab active .
Also you must set the Industries tab active.
<a class="list-group-item list-group-item-action active" data-toggle="list" href="#industries"
role="tab">
Industries Tab Data
</a>
<div class="tab-pane fade show active" id="industries" role="tabpanel">
Related
I'm pretty new in Selenium and UI automation. Have some problem with clicking on a dynamic element inside span class. So this id everytime changes for each of 3 drop-down elements. So each class for each this element the same which is create the problem as well.
So I need change the value for id="react-select-2585057--value-item"
<div class="field loan-selection">
<label class="field__body">
<div class="field__label">Verwendung
<!-- -->
</div>
<div class="field__control">
<div class="Select customSelect has-value Select--single">
<div class="Select-control">
<span class="Select-multi-value-wrapper" id="react-select-2585057--value">
<div class="Select-value">
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2585057--value-item">Freie Verwendung</span>
</div>
<div aria-expanded="false" aria-owns="" aria-activedescendant="react-select-2585057--value" aria-disabled="false" class="Select-input" role="combobox" style="border:0;width:1px;display:inline-block" tabindex="0"></div>
</span>
<span class="Select-arrow-zone">
<span class="Select-arrow"></span>
</span>
</div>
</div>
</div>
</label>
</div>
As per the HTML to invoke click() on the element with dynamic id as id="react-select-2585057--value-item" assuming this element will always be a descendent of the node <div class="field__label"> you need to induce WebDriverWait for the desired element to be clickable and you can use the following solution:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//div[#class='field loan-selection']//div[#class='field__label' and contains(., 'Verwendung')]//following::div[1]//span[#class='Select-value-label' and starts-with(#id,'react-select-')]"))).click();
So I have this Google Docs survey and there are checkboxes which I want to check with Selenium Webdriver automatically. I tried to locate the element ID but it doesn't have one, only a class name.
<label class="docssharedWizToggleLabeledContainer freebirdFormviewerViewItemsRadioChoice">
<div class="exportLabelWrapper">
<div class="quantumWizTogglePaperradioEl docssharedWizToggleLabeledControl freebirdThemedRadio freebirdThemedRadioDarkerDisabled freebirdFormviewerViewItemsRadioControl" jscontroller="EcW08c" jsaction="click:cOuCgd; mousedown:UX7yZ; mouseup:lbsD7e; mouseleave:JywGue; touchstart:p6p2H; touchmove:FwuNnf; touchend:yfqBxc(preventMouseEvents=true|preventDefault=true); touchcancel:JMtRjd; focus:AHmuwe; blur:O22p3e; keydown:I481le; contextmenu:mg9Pef" jsshadow="" aria-label="Männlich" tabindex="0" data-value="Männlich" aria-describedby=" i5" role="radio" aria-checked="false" aria-posinset="1" aria-setsize="3">
<div class="quantumWizTogglePaperradioInk exportInk"></div>
<div class="quantumWizTogglePaperradioInnerBox"></div>
<div class="quantumWizTogglePaperradioRadioContainer">
<div class="quantumWizTogglePaperradioOffRadio exportOuterCircle">
<div class="quantumWizTogglePaperradioOnRadio exportInnerCircle"></div>
</div>
</div>
</div>
<div class="docssharedWizToggleLabeledContent">
<div class="docssharedWizToggleLabeledPrimaryText">
<span dir="auto" class="docssharedWizToggleLabeledLabelText exportLabel freebirdFormviewerViewItemsRadioLabel">Männlich</span>
</div>
</div>
</div>
</label>
<div class="quantumWizTogglePaperradioRadioContainer">
<div class="quantumWizTogglePaperradioOffRadio exportOuterCircle">
<div class="quantumWizTogglePaperradioOnRadio exportInnerCircle"></div>
</div>
</div>
"Männlich" is the text of a label which belongs to the checkbox I want to mark, but not the checkbox as an element by itself.
I have tried
driver.findElement(By.name("name"))
driver.findElement(By.id("id"))
in this case.
You have to work with xpath: https://www.w3schools.com/xml/xpath_syntax.asp
Something like driver.findElement(By.xpath("//div[#class='docssharedWizToggleLabeledContent']/div")) should work.
In my application I have three listitems File Upload,View Reports and Change Password. I need to hide View Reports if the login is by normal user and i need to display View Reports if the login is by manager. Below is the code of my tabs
Code in master page-
<div class="wrapper">
<div class="menu">
<div class="menu">
<ul id="drop-nav">
<li id="MenuFileUpload" runat="server">File Upload
<ul>
<li>View Uploaded Data</li>
</ul>
</li>
<li id="MenuReports" runat="server">View Reports<ul>
<li>Report1</li>
<li>Reports2</li>
<li>Report3</li>
</ul>
</li>
<li id="lichangepwd" runat="server"><a id="A1" href="ChangePassword.jsp" runat="server">Change Password</a></li>
<div style="width:auto;float:right;font-weight:bold;padding-right:0cm;">
<li id="lilogout"> Logout</li></div>
<div style="float: left;text-align:right; width: 64%;">
<asp:Label ID="lblmsg" runat="server" ForeColor="Red" BorderColor="White" Text="Label" Font-Size="Small"></asp:Label> </div>
</ul>
</div>
</div>
code in login page-
if(role.equals("Supervisor"))
{
reports.visible=false;
}
I had tried by making reports.visible=false; which we will do in .net but its not working in java
Well basically, you pass some dto that represents logged user into the view.
Dto (Data transfer object) in most cases contains (login, firstname, lastname and role). Then in the code you do some thing like this:
<c:if test="${loggedUserDto.getRole() eq 'ADMIN'}">
<li id="MenuReports" runat="server">View Reports<ul>
....
</li>
</c:if>
If you use spring security :
<%# taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<sec:authorize access="hasRole('ADMIN')">
<li ....>
</sec:
How can I retrieve a set of links present as list items in an ordered list using XPath? I need to retrieve all sections from a forum with the following html code:
<div id="pagewrapper" class="fixed">
<div id="toplinks" class="toplinks" style="position: relative; top: 145px;">
<div class="above_body" style="height: 210px;">
<div class="body_wrapper">
<div id="breadcrumb" class="breadcrumb">
<div id="pagetitle">
<ol id="forums" class="floatcontainer">
<li id="cat3" class="forumbit_nopost new L1">
<div class="forumhead tcat foruminfo L1 collapse">
<div class="tbody_left">
<div class="tbody_right">
<ol id="c_cat3" class="childforum">
<li id="forum9" class="forumbit_post new L2">
<div class="forumrow table">
<div class="foruminfo td" style="padding-top: 12px; padding-bottom: 12px;">
<img id="forum_statusicon_9" class="forumicon" alt="" src="elitex360/statusicon/forum_new-48.png">
<div class="forumdata">
<div class="datacontainer">
<div class="titleline">
<h2 class="forumtitle">
Forum index <!-- get this link -->
</h2>
</div>
<p class="forumdescription">
</div>
</div>
</div>
<h4 class="nocss_label">Forum Actions:</h4>
<h4 class="nocss_label">Forum Statistics:</h4>
<ul class="forumstats td" style="padding-top: 18px; padding-bottom: 12px;">
<div class="forumlastpost td">
</div>
</li>
<li id="forum22" class="forumbit_post new L2">
<li id="forum40" class="forumbit_post new L2">
</ol>
<div class="tbody_under"></div>
</div>
</div>
<div class="tfoot">
</li>
<li id="cat4" class="forumbit_nopost new L1">
<li id="cat52" class="forumbit_nopost new L1">
<li id="cat5" class="forumbit_nopost new L1">
<li id="cat6" class="forumbit_nopost new L1">
<li id="cat7" class="forumbit_nopost old L1">
</ol>
The section links I have to retrieve are marked in the code above (<!-- get this link -->). I am now using the following string to retrieve all list items:
//div[#id='pagewrapper']/div[3]/ol
retrieving all list items. But I don't know how to "enter" each list item and retrieve the link label's contents. In the examples I found, knowledge of the number of list items is necessary prior to accessing them. That is not the case as the forum may have a different number of list items (the template is for a forum engine, not a forum in particular).
How can I retrieve all links within the list items?
Try below xpath to get the URL:-
//a[contains(.,'Forum index')]/#href
If you want all li in ol as I understand from you question then the xpath is as below:-
//div[#id='pagewrapper']//li[#id='cat3']//ol//li
I think Below is the xpath you are expecting:-
//div[#id='pagewrapper']//div/#href
Hope it will help you :)
I have the following HTML-Code:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<p> Test jquery menu1 </p>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<p> Test jquery menu2 </p>
</div>
</div>
And the following jQuery/Java-Code:
$(".slide-button").on('click', function() {
var panelId = $(this).attr('data-content');
$('#'+panelId).toggle(500);
$(this).find('.panel-icon').text(function(_, txt) {
return txt === "+" ? "-" : "+";
});
});
The toggle itself works perfectly. When I click on the slide-button the content will slide-down. However, after the slide-down animation is finished the content somehow "jumps up" to its final position.
How can I avoid this "jump" and get the content stays where it is after the slide-down animation is finished?
Thanks for any help :-)
I don't know exactly what your circumstances are, and whether you need <p>aragraph tags or not, but if you switch the <p> tags inside your "panels" to <span> tags it seems to fix your issue.
The HTML code I used which fixed the jump looks like this:
<div class="test-container">
<div class="slide-button" data-content="panel1">
<p><span class="panel-icon">+</span> Test1</p>
</div>
<div id="panel1" style="display: none">
<!-- Here is the first change from a paragraph to a span tag -->
<span>Test jquery menu1</span>
</div>
<div class="slide-button" data-content="panel2">
<p><span class="panel-icon">+</span> Test2</p>
</div>
<div id="panel2" style="display: none">
<!-- Here is the second change from a paragraph to a span tag -->
<span>Test jquery menu2</span>
</div>
Also, just a friendly tip, Java is not the same as JavaScript. (: Keep that in mind when tagging your questions.