I am a real beginner with Selenium and JUnit and trying to validate the functionality of a dropdown list by choosing one item. Selenium is recording it using the dynamic id, so when trying to rerun it, it cannot find the element.
I tried a few approaches in my JUnit code, but I can't seem to get it right.
It's a "View" dropdown list, where the first item is "Themes"
This is my html:
<div id="yui_3_16_0_1_1406046071286_1213" class="commontasks shaded">
<div id="pagetoolbar" class="hasnomsg hideReplyGroup">
<div id="match-messagelist-sizing">
<span id="btn-ml-cbox" class="btn btn-hdr cbox collapse-end-space" tabindex="0" aria-label="Select or deselect all messages [Ctrl+A]">
<span id="btn-select-dd" class="btn neoFocusable enabled" aria-label="Select or deselect categorized messages" aria-haspopup="true" role="button" data-action="select-dd">
<span id="btn-conv-view" class="btn btn-absolute btn-view-dd" data-action="menu" title="More view options" aria-haspopup="true" role="button">
<span id="yui_3_16_0_1_1406046071286_1215" class="icon-text">View</span>
<b id="yui_3_16_0_1_1406046071286_1212" class="icon icon-chevron-down"></b>
</span>
</div>
</div>
I tried using the following code to open the list:
driver.findElement(By.xpath("/html/body/div[7]/div[3]/div[4]/div[2]/div1/div[2]/div/div/span[3]/b")).click();
But when I'm running the test from Eclipse, it completes successfully, but I do not see the list opening. Is there a way to continue from here and choose an item from the list?
I tried using the Select option:
Select select = new Select(driver.findElement(By.xpath("/html/body/div[6]/div[3]/div[4]/div[2]/div1/div[2]/div/div/span[3]/span[text() = 'View']")));
But recieved the following error:
org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span"
I would really appreciate your comments.
Thanks
Assuming that id (yiu-*) are dynamic, I am using CSS Selector. Try the below code:
driver.findElement(By.cssSelector("div#pagetoolbar b.icon-chevron-down")).click();
for your second question, you can use only SELECT element of HTML for the Select class. As the error clearly says you are trying to use it on a SPAN element.
Related
first time poster! I'm still fairly new to coding and Django...
I'm looking to create a django if statement to see if a certain button is pressed. I have a toast set up to show an error warning if a search returns no results, but it also pops up if the user clears the search.
Here's the button(s)
<div class="input-group-append">
<button class="form-control rounded-circle btn form-button ml-2" type="submit">
<span>
<i class="fas fa-search"></i>
</span>
</button>
<button class="form-control rounded-circle btn form-button ml-2 closebutton" type="clear" name="clear">
<span>
<i class="fas fa-times"></i>
</span>
</button>
</div>
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast. Toast is below:
{% if button == 'clear' %}
<div class="toast custom-toast rounded-0 border-top-0" data-autohide="false">
<div class="arrow-up arrow-danger"></div>
<div class="w-100 toast-capper bg-danger"></div>
<div class="toast-header bg-white text-dark">
<strong class="mr-auto">Error!</strong>
<button type="button" class="ml-2 mb-1 close text-dark" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body bg-white">
{{ message }}
</div>
</div>
{% endif %}
I'd like it to spot if the button with the name/type "clear" is clicked, then it won't run the toast.
This if statement is only run on the server when it renders the HTML for the web page. It is checking if a variable named button has the string value "clear". This has nothing to do with any HTML elements in the page, let alone the name of a particular <button>. Instead, the value of the variable button comes from the "context" when your Python calls one of the render functions.
I'm looking to create a django if statement to see if a certain button is pressed.
There are two different ways to handle button clicks:
Submit a form to the server which then returns a response with a new page. This can be the same Django template rendered with different values in the context in order to get the behavior that you want.
Add an onclick handler to the button. This should be a JavaScript function that peforms the action you want. It can manipulate the elements in the page to add a toast or anything else.
The first option is very slow because it will require a new network request. The second option is probably preferred here since it will be very responsive to the user's actions.
<div class="ui form segment">
<div class="field">
<div class="ui selection dropdown" tabindex="0">
<div class="default text">
Select
</div>
<i class="dropdown icon"></i><input name="hidden-field" type="hidden">
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
</div>
</div>
</div>
this code is written inside a template.hbs(handlebar) file.
I want to initialise the drop down with the following command
$('.ui.dropdown')
.dropdown();
where could I write the second code?
if it was an html/php file I could write inside the template
Short answer, you don't.
Long answer:
If you are developer who takes any pride in his work and doesn't want the next maintainer to fantasize about drowning you in dirty toilet water, you should create a dropdown component. This component seems small in scope and would look something like this:
{{dropdown-list options=listOfOptions onOptionSelect=(action "someAction")}}
You pass in the options, convert:
<div class="menu" tabindex="-1">
<div class="item" data-value="1">
Choice 1
</div>
<div class="item" data-value="2">
Choice 2
</div>
</div>
to:
<div class="menu" tabindex="-1">
#{{each options as |option|}}
<div class="item" data-value="{{option.value}}">
option.displayName
</div>
{{/each}}
</div>
where each options is [{displayName: "Option 1", value: 1}...]
Inside of the javascript part of the component, simply execute the above code from within didInsertElement which the docs describe:
After a component successfully renders its backing HTML element into the DOM, it will trigger its didInsertElement() hook.
Lastly, inside of the component, bind listeners to the dropdowns native events. One such function, the one for the dropdown's select action, should call this.onOptionSelect(whateverTheSelectedValueIs). This allows you to define actions differently for each dropdown.
I highly recommend you take a moment to read this section of the docs
Writing Ember requires a different mindset than writing backend rendered html + jquery style applications. You want to really decouple your javascript code from the DOM as much as possible and focus on values + data down/actions up. Components are the correct place to bind to native javascript events and integrate with 3rd party addons. Doing so effectively isolates the DOM interactions and provides a nicer api to the rest of your application. If you were to just use the routes renderTemplate hook to execute the .dropdown() call, you require every developer to remember to call dropdown any time you want to use a dropdown and have done absolutely nothing for reusability and just hacked your way to a solution. Don't be that guy, do it right :)
in my page
foreach ($json->items as $sam) {
$link= $sam->id->videoId;
echo''.$link.'';
//its showing last 5 youtube video id ok.. i set every video id witha button for modal
echo'<button type="button" data-toggle="modal" data-target="#PlayModal" class="btn btn-outline btn-danger">Play</button>';
}
but when im trying to open a model by box in new winddow pop up there only show 1st video ID. modal not getting '.$link.' valu in popup window. modal code puting same page blew finish {}
echo'<div class="modal inmodal" id="PlayModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content animated bounceInRight">
<div class="modal-body">
<p>'.$name.'</p>
<div class="modal-footer">
<button type="button" class="btn btn-outline btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>';
According to the code given, even the first video should not play.
it is not printing the value of LINK inside the button, so it will not work.
Unless you have a JAVASCRIPT code observing the click and playing the video on click.
You can create the HTML code first manually containing the 5 video ID, and each video should have a button (according to your description), when clicked it will open the modal.
once that is done, you will be able to use php for each to properly echo the html code.
alternatively, the videos are in HTML list, and javascript will handle the event click, reading the video ID and passing to the player in the modal.
in either case, you need to understand the HTML structure first.
Is it possible to open a Foundation 6.3 accordion menu from a regular href link on the same page? I'm using the most current Foundation v6.3.1 and have found some info on doing this but nothing that works in my case.
This post seems to have an ideal solution (Trigger opening of a Zurb Foundation Accordion via URL hash link) but it doesn't seem to jell with the latest release?
Yep, there are some alternative methods and the exact way it's applied is up to what you want to achieve, but basically the answer is: "use JavaScript".
This is my method:
Add a means of identifying the CONTENT of each tab you want to open. Below I have added a new data attribute (data-remote) to .accordion-content.
Create a link that has an id that corresponds to the new data-remote on the tab you want to open with that link. e.g. id="toggleAco1" & data-remote="toggleAco1"
Use the in-built Foundation function to toggle the tab on click (see JS/JQ below)
So all together it is something like this:
HTML
<div class="block">
<ul class="accordion" data-accordion>
<li class="accordion-item is-active" data-accordion-item>
Accordion 1
<div class="accordion-content" data-tab-content data-remote="toggleAco1">
<p>Panel 1. Lorem ipsum dolor</p>
Nowhere to Go
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 2
<div class="accordion-content" data-tab-content data-remote="toggleAco2">
<textarea></textarea>
<button class="button">I do nothing!</button>
</div>
</li>
<li class="accordion-item" data-accordion-item>
Accordion 3
<div class="accordion-content" data-tab-content data-remote="toggleAco3">
Pick a date!
<input type="date"></input>
</div>
</li>
</ul>
</div>
<div class="block">
Open accordion tab 1
Open accordion tab 2
Open accordion tab 3
</div>
JS/JQ
$('a').on('click', function() {
var dataTarget = $(this).attr('id');
$('.accordion').foundation('toggle', $('[data-remote="' + dataTarget + '"]'));
});
A simple JSFiddle example
The advanced options from the docs
N.B. What the links will do is linked to the data attributes you include and the same as if you clicked the accordion title for a tab. So if you allow multi-opening then the links will open each and leave it open, if you don't (as in the e.g.) then they will close once a new one is open etc.
How can i make shopify gird view and list view? I already done html and collection-list.liquid for list view.
Here is the button code-->
<div class="collection-view">
<button type="button" title="Grid view" class="change-view{% unless template contains 'list' %} change-view--active{% endunless %}" data-view="grid">
<span class="icon-fallback-text">
<span class="icon icon-grid-view" aria-hidden="true"></span>
<span class="fallback-text">Grid View</span>
</span>
List View
I need jquery or javascript code for control the gird view and list view on shopify.
example button--> http://prntscr.com/8lfkvh
You could add a class using JavaScript to the .collection-view using a click event of one of the buttons to toggle between the two different views.