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?
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.
I'm trying to chain together a Selector, a withText, a find, and another withText in order to find a particular link.
Here's the HTML I'm trying to search through, and I want to select the "Edit" button that's in the div with the text "Reviewers":
<div class="content">
<div class="ui edit-segment--header">Documents
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<div role="list" class="ui bulleted list">
<div role="listitem" class="item"><span>Budget</span></div>
<div role="listitem" class="item"><span>Draw cover sheet</span></div>
<!-- (a few more...) -->
</div>
</div>
</div>
<div class="content">
<div class="ui edit-segment--header">Rules
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<h4 class="ui header">Automatic</h4><span>No rules selected</span>
<h4 class="ui header">Manual</h4><span>No rules selected</span></div>
</div>
<div class="content">
<div class="ui edit-segment--header">Reviewers
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<div role="list" class="ui list">None</div>
</div>
</div>
I'm trying to click this using:
await t.click(Selector("div").withText("Reviewers").find("button").withText("Edit"));
TestCafe ends up finding the "Edit" button that's in the div with the text "Documents" inside and clicking it.
I would expect that Selector("div").withText("Reviewers") would find the specific div with the text Reviewers inside it, and then the .find("button").withText("Edit") would find the only child button (which happens to have the text Edit) inside that. Am I misunderstanding how it should work? Thanks
Your "Edit button" selector (Selector('div').withText('Reviewers').find('button').withText('Edit')) is correct.
I would expect that Selector("div").withText("Reviewers") would find the specific div with the text Reviewers inside it
The main point of your example is that the "Reviewers" (Selector('div').withText('Reviewers')) selector matches two div elements.
To illustrate it I made the following test in the context of your example page:
test.js
import { Selector } from 'testcafe';
fixture `fixture`
.page `http://localhost:8080`;
test('test', async t => {
const divReviewers = Selector('div').withText('Reviewers').addCustomDOMProperties({
outerHTML: el => el.outerHTML
});
await t
.expect(divReviewers.count).eql(2);
console.log('[1] divReviewers.nth(0).outerHTML:\n', await divReviewers.nth(0).outerHTML);
console.log('[2] divReviewers.nth(1).outerHTML:\n', await divReviewers.nth(1).outerHTML);
});
Result
[1] divReviewers.nth(0).outerHTML:
<div class="content">
<div class="ui edit-segment--header">Reviewers
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
<div class="ui segment segment__compact-top">
<div role="list" class="ui list">None</div>
</div>
</div>
[2] divReviewers.nth(1).outerHTML:
<div class="ui edit-segment--header">Reviewers
<button type="button" data-testid="edit-segment" class="material link right floated relaxed-top">Edit</button>
</div>
√ test
1 passed (1s)
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'])
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>