I can't find anywhere how to click a modal button. The hard part is that all the modals buttons in this website have the same id so when i try the simple click() command it only works for the very first modal of the website.
EDIT
Actually my bad. I can't click modal's buttons.
EDIT 2
I have two pages with the same modal appearing in both. My problem is when i try to hit those buttons in my second page. It seems like it reacts only to fist modal.
<body class="bg ng-scope" ng-app="app">
<div class="ng-scope" autoscroll="true" ui-view="" style="">
<div class="ng-scope" src="'/js/layout/navbar.html'" ng-include="" style="">
<div id="searchContainer" class="container ng-scope">
<div id="resultsContainer" class="container ng-scope ng-hide" ng-show="vm.isAvailable"> </div>
<div class="ng-scope" src="'/js/layout/modals.html'" ng-include="" style="">
<script id="myModalContent.html" class="ng-scope" type="text/ng-template">
<div class="modal fade children-policy-modal ng-scope">
<div class="modal fade articles-modal ng-scope">
<div class="modal fade booking-code-modal ng-scope" style="display: none;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="ng-pristine ng-invalid ng-invalid-required" role="form" name="vm.bookingCodeForm">
<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">
<button class="btn btn-info btn-sm ng-binding" ng-click="vm.checkBookingCode()" type="submit">BUTTON 1</button>
<button class="btn btn-default ng-binding" data-dismiss="modal" type="button">BUTTON2</button>
EDIT 3
I used the following code
.click('a[data-target=".voucher-code-modal"]')
.waitForElementVisible('button[class="btn btn-default ng-binding"]', 5000)
.click('button[class="btn btn-default ng-binding"]')
and i get the following message
Warn: waitForElement found 9 elements for selector button[class="btn
btn-default ng-binding"]'}. Only the first one will be checked.
And then i get timed out cause of time.
So your xpath should be something like this: .//div[#id='your id' and contains(#style,'display: block')] this will give only those modals..which appear on clicking..also ensure the result count with above xpath should be 1..Please note above xpath is not tried and tested, but something on those lines should give your answer.
I used the following to select a text area inside a modal window
'md-dialog[aria-label="Url Document ..."] textarea[name="description"]'
That makes my setvalue code look like
.setValue('md-dialog[aria-label="Url Document ..."] textarea[name="description"]', 'random string')
Not the nicest line of code, but Page Objects lets you tidy it up.
From what I can work out in your code snippet you'd want something like
.click(form[name='vm.bookingCodeForm'] button[type='submit'])
Related
I have two objects on the page with same html. Only one of the element's parent tag doesn't have same class name. When I try using not(contains()) it still shows both elements
below is the xpath I tried and still it is detecting both buttons and always clicking on the second button.
//div[contains(#class,"jss") and
not(contains(#class,"canvas-image-export"))]//button[contains(.,'Connected')]
below is the code for first button named Connected where I am interested to get
<div class="jss203">
<div class="MuiTabs-root jss244">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Overview</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Data Sources</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Connected</span><span class="MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</div>
below is the code for second button named Connected which I should not click on
<div class="jss197 canvas-image-export">
<span class="" data-testid="componentContainer">
<div class="MuiTabs-root jss244">
<div class="MuiTabs-scroller MuiTabs-fixed" style="overflow: hidden;">
<div class="MuiTabs-flexContainer" role="tablist">
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected" tabindex="0" type="button" role="tab" aria-selected="true"><span class="MuiTab-wrapper">Overview</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Data Sources</span><span class="MuiTouchRipple-root"></span></button>
<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary" tabindex="-1" type="button" role="tab" aria-selected="false"><span class="MuiTab-wrapper">Connected</span><span class="MuiTouchRipple-root"></span></button>
</div>
</div>
</div>
</span>
</div>
TIA
Your problem here is that you are looking on the upper parent node <div class="jss197 canvas-image-export"> vs <div class="jss203"> while there is another element there <div class="MuiTabs-root jss244"> or <div class="MuiTabs-root jss244"> and it is also matching your XPath //div[contains(#class,"jss") and not(contains(#class,"canvas-image-export"))]//button[contains(.,'Connected')].
So, to make your XPath work you need to add one more detail: not contains MuiTabs-root class, as following:
//div[contains(#class,"jss") and not(contains(#class,"canvas-image-export")) and not(contains(#class,"MuiTabs-root"))]//button[contains(.,'Connected')]
To get only first div buttons, you can exclude the span tag for the second element. Using following xpath you can get that.
//div[starts-with(#class,'jss')][not(span[#data-testid='componentContainer'])]//button[contains(.,'Connected')]
Or
//div[starts-with(#class,'jss')][not(span)]//button[contains(.,'Connected')]
I installed your wonderful program flexible view control for XPage. Everything works great. But unfortunately I could not get her to work in a modal window or picklist. I see only the column headings and info (footer). All rows in table is absend, but info (footer) shows real counts rows (in my case 4).
Could you tell me how to do this?
<!-- Modal -->
<div class="modal fade picklist" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">x</span>
</button>
<h4 class="modal-title" id="myModalLabel">Choose a record</h4>
</div>
<xc:ccRestView showFooter="true" showFixedHeader="true"
showFilter="true" showInfo="true" showCellBorders="false"
keyIsCategory="false" refreshInterval="0" multiValue="false"
showRefreshButton="true" showFilterText="true" scroller="true"
ordering="true" scrollerCount="500" thisView="ViewBasic"
viewKey="view-definitions"
dataTableClass="tableViewBasic"
rowCallback="ccRestView.defaultRowCallback" filterText="Поиск"
dataTableClassDefault="table table-striped table-bordered">
</xc:ccRestView>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
Oleg - see this blog post for how to get the control working with the Bootstrap modal:
https://xpage.me/2020/04/06/a-flexible-view-control-for-xpages-part-7-modals-picklists/
And you can view a working demo here:
http://demos.xpage.me/demos/datatables-xpages-bootstrap.nsf/viewPicklist.xsp
Also, in your source above you are missing the modal-body div. This is a required component inside the Bootstrap modal.
The key to loading DataTables inside a modal is initializing the view AFTER the modal has been rendered, especially when the fixed header is being used.
Can I eliminate some of these divs. I like to keep my code lean. I understand the 5th one b.c. it is the footer, but what about the other 4.
Here is the code
<div class="container">
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Submit</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body">
<p>Bookmarks</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the fiddle to run it
https://jsfiddle.net/te4ta7hc/
Let me tell you about the modal window first
Where the modal content is the base which will show after triggering the modal.
Modal Header where we can able to put the heading for our modal window like( Enquiry form).
Modal Body: where the actual content have to be present whatever it may be. Such as Forms, Text contents etc..
Modal footer: where you can add some actions like close button or anything else
So if you want to eliminate the code means you can remove the modal header and footer.. make sure you added button to close modal in modal body
i have a div which is dynamically generated though button click.
As follows:
`
<div id="modal4#{c.requestId}" class="modal-approval-size modal fade modal1" tabindex='-1'>
<div class="modal-dialog modal_dialog"
style="background-color: #f5f3f4;">
<div class="modal-content-new modal-content">
<div class="modal-header modal_header">
<h4 class="modal-title">Confirmation Header</h4>
</div>
<div class="modal-body modal_body">
<p>Please confirm the approval by clicking Ok. If you do not wish to approve the request please click Cancel.</p>
</div>
<div class="modal_footer">
<span><a href="#"
style="color: #000000; text-decoration: underline;"
data-dismiss="modal" aria-hidden="true">Cancel(Esc)</a></span>
<button type="button" class="btn btn-primary approve_btn"
data-dismiss="modal" id="approvalConfirm" onclick="callFunction('#{c.requestId}','C','A')">OK</button>
</div>
</div>
</div>
</div>`
I want to click on the OK button through selenium WebDriver.
I am using Xpath as below:
//*[#id="approvalConfirm"]
But its not clickable and working. Can you please tell me why and how to fix it?
I am having an alert box for saving changes in a form. However, I am not able to automate the alert box using selenium. Here's an image of the Alert box. I have already used the methods like :
driver.switchTo().alert().accept();
but this is also not working.
HTML code for the alert:
<div id="ngdialog2" class="ngdialog ngdialog-theme-default ng-scope" role="alertdialog" aria-labelledby="ngdialog2-aria-labelledby" aria-describedby="ngdialog2-aria-describedby">
<div class="ngdialog-overlay" />
<div class="ngdialog-content" role="document">
<div class="ngdialog-message">
<div class="dialog-header clearfix">
<h3 id="ngdialog2-aria-labelledby" class="ng-binding">Confirm</h3>
</div>
<div class="dialog-content">
<p id="ngdialog2-aria-describedby" class="ng-binding">Do you want to save?</p>
</div>
<div class="button-controls">
<button class="button cancel-btn ng-binding" ng-click="closeThisDialog(false)">No</button>
<button class="button btn-submit ng-binding" ng-click="closeThisDialog(true)">Yes</button>
</div>
</div>
</div>
</div>