I am attempting to click a button that shares alot of code with other objects within the UI. Here is the code for the button:
<div class="ui green ok inverted button">
<i class="checkmark icon"></i> Yes </div>
Here is the modal the button is a part of:
<div class="actions"> <div class="ui red cancel inverted button">
<i class="remove icon"></i> No </div>
<div class="ui green ok inverted button">
<i class="checkmark icon"></i> Yes </div> <!--anchor--> </div>
Here is an example of what I have tried without success:
By.xpath("//div[text()='green']")
I have also attempted "class" tag locators and other div class text locators and I get "unable to find" every time. The text "green" and "Yes" are the only unique attributes for this particular object.
Try with this:
driver.find_element_by_xpath("//div[#class='actions']//div[#class='ui green ok inverted button']")
//div[contains(#class,"green")]
I was able to work out a CSS Selector for this as well:
By.cssSelector(".odr-disconnect-phone .ui.green.ok.inverted.button"
Related
Semantic UI link: https://semantic-ui.com/elements/loader.html
Here is Semantic code provided:
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui text loader">Loading</div>
</div>
<p></p>
</div>
I want to use loading spinner on Save and also for global(eg. form load).
When action is performed, spinner should be disappeared
Here is my HTML:
<button class="ui positive button" id="btn_save" formaction="AddNewDriver">Save</button>
"AddNewDriver" is my servlet which is performing save and lot of code.
Please give simple solution and where should i add that?
I'm using ejs templates for my webpage, and I'm having layout troubles.
I have a button inside a <div> that's set to display:none as a dropdown, and should show up when the container is hovered over. Instead, the buttons that should be in the dropdown are rendered outside of it and have seemingly no relation to it.
Source ejs file:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
<button>TestButton</button>
</div>
</button>
And the resulting page according to chrome's element viewer:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
</div>
</button>
<button>TestButton</button>
The <p> tag still displays correctly
I don't believe you can put a button element within a button element.
Try it out on MDN here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This is the example input I put into their live editor. When you inspect the button, you'll get the same output as you've shared in your post.
<button class="favorite styled"
type="button">
<button>Hello</button>
Add to favorites
</button>
Depending on where you need the button, you could try styling the outside or inside element to look like a button as a work around!
I currently working on a new webapplication where I have an input for some text. If the text is not valid, a div will popup and show an information. In this div I have a button which closes the popup but this button is not focused. I tried <button autofocus></<button>. The problem of autofocus is, that it focus only once when the pace refreshs.
Does anyone have an idea how to solve that problem?
Here is my unfinished code (popup):
<div class="modal__body">
<p [innerHTML]="'Question.IncorrectNotification' | translate:{value: (policy?.maxTriesBeforeTimeout - userService?.trialNumber)}"></p>
<div class="button-group flex-items-xs-center">
<button autofocus (click)="closeIncorrectAnswerDialog()" class="button button--primary">
{{ 'Question.OkButton' | translate }}
</button>
</div>
</div>
Thanks in advance!
I've a sign up form with a really simple markup which doesn't support accessibility. It is basically following:
<div class="responsiveCell responsiveCellSize2">
<div class="alignBottom minSize2">
<div id="cont_id_f_c816dab2f221e8118135e0071b652f51" class="stat_group checkbox-container group group-id-cont_id_f_c816dab2f221e8118135e0071b652f51 has-children">
<input class="floatLeft" id="f_c816dab2f221e8118135e0071b652f51" name="f_c816dab2f221e8118135e0071b652f51" leadfield="" contactfield="" aria-labelledby="label-cont_id_f_c816dab2f221e8118135e0071b652f51" type="checkbox">
<span style="font-family:Arial; font-weight:normal; font-size:16px; color:#A40084;" class="group-title active" id="label-cont_id_f_c816dab2f221e8118135e0071b652f51" role="button" aria-expanded="true" tabindex="0">Economy</span>
</div>
</div>
<div class="clear"> </div>
<div style="alignTop minSize2">
<div id="required_info_f_c816dab2f221e8118135e0071b652f51" class="requiredInfo floatLeft">
</div>
</div>
</div>
<div class="responsiveCell responsiveCellSize1 emptyCell"> </div>
And this pattern occurs about 50 times on the page. This markup already has my extra markup for supporting accessibility.
Markup cannot be changed in the backend.
Now I'm facing an issue where user cannot proceed to next element while pressing tab.
Keyboard navigation stops to first instance of a SPAN element which has following attributes:
role="button"
aria-expanded="true"
tabindex="0"
If I take your code snippet and repeat it several times in a test file, I can successfully tab to each checkbox and each "Economy" label. It's a little unusual to have the label of a checkbox be a button instead of plain text, but there isn't anything invalid about the html. The screen reader announces it just fine.
"Economy check box not checked"
"Economy button expanded"
"Economy2 check box not checked"
"Economy2 button expanded"
"Economy3 check box not checked"
"Economy3 button expanded"
I am trying to make a button show and hide a div. I think I almost have it done, but I am missing this very last part.
Here is what I would like to happen: when you click on the red "change template" button, the text changes to "back to page 1". Now click on the red button again. The one that says "back to page 1" - I need that to actually change the div below to the yellow box. Right now it does nothing when you click on the red button the second time.
I would also need the text to change back to "change template". I am thinking what I need is a toggle button.
I have tried to implement multiple toggle buttons I found on stackoverflow already, but it seems my other code might be getting in the way. I made a plunker so its easy to see the problem.
http://plnkr.co/edit/RpqoXXHGBeYaBzIlD8Qb?p=preview
<div class="btn top-menu-button finchbutton red" ng-click="finchange='show';finpage1='';finpage2='';finpage3='';hellotext='hide';goodbyetext='show'">
<span class="btntext" ng-class="hellotext">Change Template</span><span class="btntext" ng-class="goodbyetext">Back To Template</span></div>
<div class="btn top-menu-button finbutton1 orange" ng-click="finpage1='show';finpage2='';finpage3='';finchange='';hellotext='show';goodbyetext='hide'">Page 1</div>
<div class="btn top-menu-button finbutton2 blue" ng-click="finpage2='show';finpage1='';finpage3='';finchange='';hellotext='show';goodbyetext='hide'">Page 2</div>
<div class="btn top-menu-button finbutton3 pink" ng-click="finpage3='show';finpage1='';finpage2='';finchange='';hellotext='show';goodbyetext='hide'">Page 3</div>
As per your code, whenever you click on the button it will always hide "hellotext" and show "goodbyetext"
What you need to do is add is a function which checks for the value of hellotext and/or goodbyetext and toggle it based on values
Hope it helps!!
If I get you right you need a toggle button behavior. This case it will be more naturally to use ng-show/ng-hide
<div ng-app="ngAnimate" ng-init="firstOn=true;">
<div class="btn top-menu-button finchbutton red" ng-click="firstOn = !firstOn;">
<span class="btntext" ng-show="firstOn">Change Template</span><span ng-hide="firstOn" class="btntext">Back To Page 1</span></div>
<div class="btn top-menu-button finbutton1 orange" ng-click="">Page 1</div>
<div class="btn top-menu-button finbutton2 blue" ng-click="">Page 2</div>
<div class="btn top-menu-button finbutton3 pink" ng-click="">Page 3</div>
<br>
<span class="template-panel red" ng-show="!firstOn">Red</span>
<span class="template-panel orange" ng-show="firstOn">Orange</span>
<span class="template-panel blue hide">Blue</span>
<span class="template-panel pink hide">Pink</span>
</div>
You can see the example (I simplified yours a little to have the idea clear) at http://plnkr.co/edit/es5pgmrgsXbm6bP8CSrr