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>
Related
My system does not show the modal fade when I click on the button I don't know what to do anymore I'm using vuetify , vue js , and axios in the project follow the code section below
<div
ref="modal"
class="modal show"
:class="{show}"
tabindex="-1"
role="dialog"
>
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Criação de Marca</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
#click="criarMarca"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form v-on:submit.prevent="cadastroMarca">
<div class="mb-3">
<label for="formName" class="form-label">Nome</label>
<input class="form-control" type="text" v-model="Marca" id="marca">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary pull-right">Cadastrar</button>
</div>
</form>
</div>
</div>
</div>
</div>
I already tried to reinstall the node module, I already changed it for modal-dialog, then when I change it for modal-dialog it appears more static, I would like to know if anyone has had this problem, if so, what is the way to solve it
I'm trying to click on 'Recommended' input tag of a 'Samsung' label. Please find the appropriate HTML code below.
`
<div class="card-wrapper">
<a class="card-focus has-shadow" href="/app/72292">
<div class="card-container">
<div class="card-logo">
<section class="card-info">
<div class="card-name">Samsung Push Service</div>
<div class="card-publisher hidden-xs">Samsung Push Service</div>
</section>
<div class="card-rating">
</div>
</a>
</div>
<div class="hidden-xs">
<div>
<div class="app-management">
<div class="checkbox ">
<div class="checkbox ">
<label>
<input id="Recommended-72292" class="" aria-disabled="false" value="Recommended" type="checkbox"/>
<span class="cr"/>
<span class="layer-label">Recommended</span>
</label>
</div>
<a href="/mdm">
</div>
</div>
</div>
</div>`
How to achieve this?
Your input seems to be a checkbox, not a button. Try changing its checked value instead of triggering a click:
document.getElementById('Recommended-72292').checked = true;
In selenium, click() method would do your job.
if ( !driver.findElement(By.id("Recommended-72292")).isSelected() )
{
driver.findElement(By.id("Recommended-72292")).click();
}
try following:
driver.findElement(By.cssSelector("div.checkbox input#Recommended-72292")).click();
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?
My twitter bootstrap modal window isn't loading properly; it is faded when it loads. Here is an image demonstrating the problem.
I have tried a few things but cannot resolve the issue.
My code is:
<button type=\"button\" class=\"btn btn-danger btn-mini\" data-toggle=\"modal\" data-target=\"#myModal\" href=\"#myModal\">
<div id=\"myModal\" class=\"modal fade\">
<div class=\"modal-dialog\">
<div class=\"modal-content\">
<div class=\"modal-header\">
<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\">×</button>
<h4 class=\"modal-title\">Confirmation</h4>
</div>
<div class=\"modal-body\">
<p>Do you want to save changes you made to document before closing?</p>
<p class=\"text-warning\"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class=\"modal-footer\">
<button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>
<button type=\"button\" class=\"btn btn-primary\">Save changes</button>
</div>
</div>
</div>
</div></div>
There's invalid syntax in your code example (HTML and Bootstrap). It seems like you're trying to load a warning button before the modal, but you're missing text for the button as well as the closing button tag. Here's a Bootstrap 3 example that should accomplish what you described:
<button class="btn btn-danger btn-xs" data-toggle="modal" data-target="#myModal" href="#myModal">
Save Now!
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to save changes you made to document before closing?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Edit the button text to read what you'd like. "Save Now!" is just an example for illustration purposes.
Weird issue. When the button that launches the modal window is located inside the form div, the modal window fails to launch. Chrome says
"Resource interpreted as Script but transferred with MIME type text/x-js:"
I already put a type for the source js but it didnt help. I also moved the call to earlier on in the page and that didnt work. The really weird part is, if I move the button outside of the form div, the modal opens just fine with no issue. Has anyone experienced this and can point me in the right direction. Thanks in advance
Edit: Here is the code(I cut out the content)
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="companyName">Company Name</label>
<input type="text" class="form-control" id="companyName" placeholder="Company Name">
</div>
<div class="form-group">
<label for="chainCode">Chain Code</label>
<input type="text" class="form-control" id="chainCode" placeholder="Chain Code">
</div>
<div class="form-group">
<label for="nCode">N-Code</label>
<input type="text" class="form-control" id="nCode" placeholder="N-Code">
</div>
<button type="submit" class="btn btn-success">Search</button>
<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal"> Advanced
<span class="glyphicon glyphicon-cog"></span>
</button>
</form>
<!-- Advanced Modal -->
<div class="modal fade" id="advancedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Advanced Options</h4>
</div>
<div class="modal-body">
<form role="form" id="myForm" method="post">
<div class="form-group">
</form><!-- end advanced form -->
</div><!-- end modal-body -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div><!-- end modal-footer -->
</div><!-- end modal content -->
</div><!-- end modal dialog large -->
</div><!-- end Advanced Modal -->
</div><!-- End Form Container -->
somehow it seems to me, that bootstrap gets confused with the button in the form somehow.
so try using
<a class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
Advanced <span class="glyphicon glyphicon-cog"></span>
</a>
instead of
<button class="btn btn-warning" data-toggle="modal" data-target="#advancedModal">
Advanced <span class="glyphicon glyphicon-cog"></span>
</button>
It should work, and looks just the same.