Using a VB script (via Excel), I am working on automating some data entry into an IE web page. I have successfully been able to use ".getElementById("WhateverID").Click" in most instances. However, there is a plus sign button that has not been responding to the Click command. Here is what the button ("btnAddAction") looks like:
Add Action
Upon clicking the Add Action button, two new buttons appear ("btnSaveAction" and "btnCancelAction"):
Save Action & Cancel Action
Any suggestions on how to get this Add Action button to respond with this code:
objIE.document.getElementById("btnAddAction").Click
Here is the web inspection code:
<section class="placement-update" id="DecisionUpdate">
<div style="display: block;">
<nav class="navbar navheading blueBar">
<h5 class="heading"> Decision Update</h5>
<div class="ml-auto crd_save">
<img tabindex="-32768" class="pointer" id="btnSaveAction" style="display: inline;" src="/images/save.svg">
</div>
<div class="edit">
<img tabindex="-32768" class="pointer" id="btnAddAction" style="display: none;" src="/images/add.svg">
<img tabindex="-32768" class="pointer" id="btnCancelAction" style="display: inline;" src="/images/cancel.svg">
</div>
</nav>
Related
I am using ngx clipboard to copy my value to clipboard which is working fine if I do that in the main page but I want that functionality in my modal which is neither throwing any error nor copying anything.
Angular-5.2.3
ngx-clipboard-9.1.3
Below is the code:
<span>
<img src="../../assets/img/copy-icon.png" ngxClipboard [cbContent]="myvalue" (click)="copyToClipboard()">
</span>
and my ts file:
copyToClipboard(){
console.log("copyToClipboard")
}
For all those who are getting this error below is the answer:
TLDR;
Make your own textarea to hold the value to copy and hook ngxClipboard to it.
Longer Explanation
I had a couple of issues with this plugin that seemed to happen a lot in Chrome (v64). I was getting intermittent successes.. most of the time the 'copy to clipboard' would fail to actually copy anything, and the 'success' callback would also be called. So it was the worst of both.. nothing in the logs, no copy, cbOnSuccess called. The above seemed exacerbated by large amounts of text. Safari seemed to work just fine. In Chrome, I noticed some messages in the console in the 'verbose' mode that were timeout kinds of errors.
Now I don't know the full story, but it seemed like the code in ngx-clipboard that was 'creating a text area' was showing me (in the debugger) a message like 'Uncaught SyntaxError: Unexpected end of input'.
I also use a Bootstrap modal but I'm not sure if that was really causing much of an issue. In the end, I was able to get everything going when I:
made my own
used the [ngxClipboard]="textAreaName" format
html template
<div class="modal fade" id="export-bundle-modal-{{bundleToExport.id}}" tabindex="-1" role="dialog"
aria-labelledby="modal-content modal-header title">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" #exportBundleModalClose data-dismiss="modal">×</button>
<span id="title">Export {{bundleToExport.name}}</span>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<textarea class="form-control text-area" readonly="readonly"
rows="10" #bundleJson style="resize: none">{{bundleWithDependencies | json}}</textarea>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="submit" data-dismiss="modal"
[disabled]="!taxonomiesLoaded || !componentTypesLoaded || !configurationsLoaded"
[ngxClipboard]="bundleJson" (cbOnSuccess)="copied()">
<small *ngIf="!(taxonomiesLoaded && componentTypesLoaded && configurationsLoaded)">
LOADING...
</small>
<small *ngIf="taxonomiesLoaded && componentTypesLoaded && configurationsLoaded">
COPY TO CLIPBOARD
</small>
</button>
</div>
</div>
</div>
</div>
Notice the button and how bundleJson is attached to the via the #bundleJson and the 'value' of the textarea is a pipe calculated value. Doing the calculation here (as opposed to when the 'copy to clipboard' was clicked also was necessary.. in essence, make sure the string in the textarea is correct before trying to send it to the clipboard.
We also use the bootstrap.js + jQuery integration instead of a native Angular bootstrap solution (don't ask), so notice that the data-dismiss="modal" is also attached to the button. When the button is clicked both the copied() function as well as the close of the modal happen.. there didn't seem to be any chaining/timing issues.
Add #container in modal div.
<div class="modal fade" id="addAddressSuccessModal" tabindex="-1" role="dialog" aria-hidden="true" #container>
And to copy =>
<div ngxClipboard [cbContent]="createdAddress" [container]="container" ><label class="fbold color-bluey-grey font-10 cursor-pointer">TAP TO COPY</label></div>
Here is the scenario, I have multiple tiles on home page. when a user logins in for the first time some of them need to be disabled. Same i am trying to test using selenium.
To disable the div i am using ng-class by which i am applying .disableDiv class on the div which has below css
.disableDiv {
pointer-events: none;
opacity: 0.4; }
When i target it using .isEnabled() but it is showing true even if the disable class is applied on it.
Please suggest how should i target the disabled elements.
below as you see isNewUser is ng-class which applies .disableDiv on the element which makes is disabled for the end user.
Thanks in advance
HTML
<div class="col-md-6 col-sm-12 tile-box-1" id="div-importcontent" ng-class="isNewUser">
<div class="tile-box-2">
<div class="col-md-2 col-sm-2 col-xs-3 tile-box icon-box">
<!-- icon -->
<a class="d-icon-download icon" ui-sref="importcontent" id="a-importcontent"></a>
</div>
<div class="col-md-10 col-sm-9 col-xs-8 tile-box desc-box">
<h4 class="heading" ui-sref="importcontent" id="h4-importcontent">Import content</h4>
<!-- <a class="d-icon-info_circle icon-info"></a> -->
<span class="desc" ui-sref="importcontent" id="span-importcontent">Import installed applications reporting content into BMC Remedy Smart Reporting
</span>
</div>
</div>
</div>
I am developing an Angular 4 application using ngx-bootstrap modals heavily. I am currently using the template + modalService way of opening up modals. During a click event, this line of code is called:
#ViewChild() worklistTemplate;
// ...
this.modalRef = this.modalService.show(this.worklistTemplate, this.config);
And the worklist template looks like this:
<ng-template #worklistTemplate>
<app-action-view
[leftButtons]="leftButtons"
[labelHeader]="modalHeader"
[labelIcon]="modalIcon"
[modalRef]="modalRef">
<div class="row modal-info-panel">
<div class="col-xs-4 modal-user-info">
<fa name="mars" class="gender-icon"></fa>
<div class="field-panel">
<input type="text"
[ngModel]="rowInfo.lastName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<input type="text"
[ngModel]="rowInfo.firstName"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
<div>
<label for="modal-mrn">MRN --</label>
<input id="modal-mrn" type="text"
[ngModel]="rowInfo.mrn"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div>
<label for="modal-dob">DOB --</label>
<input id="modal-dob" type="text"
[ngModel]="rowInfo.birthDate"
[ngClass]="{ 'modal-editable-field': modalFieldsEditable }"
[disabled]="!modalFieldsEditable">
</div>
<div class="edit-panel">
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons green-hover link" name="floppy-o" tooltip="Save" (click)=saveChanges()></fa>
<fa *ngIf=modalFieldsEditable class="worklist-edit-buttons red-hover link" name="times" tooltip="Cancel" (click)=toggleModalFields()></fa>
</div>
</div>
</div>
<div class="col-xs-8 modal-id-info">
Associated ID
<div class="full-width">
<div class="row" *ngFor="let i of rowInfo.associatedIDs">
<div class="col-xs-6 cell">{{i.id}}</div><div class="col-xs-6 cell">{{i.source}}</div>
</div>
</div>
</div>
</div>
<div class="row" id="modal-table">
<app-table-view
[columns]="objDetailsCols"
[tableData]="objDetailsData"
[expandTemplate]="rowImageContainer"
[expandColStyle]="expandColStyle">
</app-table-view>
</div>
<div *ngIf="resolvePanelVisible" class="resolve-panel"
[#slideRight]>
<div class="resolve-label">
<fa class="lt-icon" name="wrench"></fa>
Resolve QA Issue
</div>
<div class="resolve-body">
Hello, World!
</div>
<div class="resolve-footer">
<a>Validate</a>
<a>Resolve</a>
<a>Reload</a>
<a (click)="toggleResolvePanel()">Close</a>
</div>
</div>
</app-action-view>
</ng-template>
The modal can be closed by clicking outside of the modal boundaries or there is a button inside the ActionViewComponent that calls modalRef.hide().
Memory usage increases drastically as more and more modals are opened. In fact, if I open the modal around 5 times, the application becomes sluggish and almost unusable. This is especially apparent if there are many rows in our TableViewComponent.
Is there a problem with the way I am using the modals, or is this an issue related to ngx-bootstrap modals? OR, is the issue related to the browser and unavoidable? I am developing on Chrome 62 right now.
I have verified that onDestroy is never called on the TableViewComponent inside the modal. It is not even called if I navigate to a different page component, though another table (not in the template) does have onDestroy called when navigating from the page.
Any feedback is appreciated greatly- I have been stuck for way too long on this.
This is an issue of ngx-bootstrap, unfortunately. I created a pull request (https://github.com/valor-software/ngx-bootstrap/pull/3179) so this will be fixed as soon as my PR is merged and new version is released.
I am currently working on a slider, using touchSlider, and it mouseTouch option won't work for me.
Slider itself works fine, but not the mouseTouch option.
What am I doing wrong?
Here is my js:
$(document).ready(function() {
$(".touchslider").touchSlider({ mouseTouch: true });
});
and html:
<div class="touchslider">
<div class="touchslider-viewport" style="width:500px; height: 375px;overflow:hidden; border: 1px solid #f00;"><div>
<div class="touchslider-item"><img src="img/3540115854_5d302001da.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3542680555_ea43d85e0a.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3540231388_f8ec22b549.jpg" width="500" height="354" /></div>
<div class="touchslider-item"><img src="img/3546828250_6f91b64ba7.jpg" width="500" height="354" /></div>
</div></div>
<div>
<span class="touchslider-prev">←</span>
<span class="touchslider-nav-item touchslider-nav-item-current">1</span>
<span class="touchslider-nav-item">2</span>
<span class="touchslider-nav-item">3</span>
<span class="touchslider-nav-item">4</span>
<span class="touchslider-next">→</span>
</div>
</div>
Got the same problem when accessing the .html via my local file system using the file-protocol
file://pathtothehtml/touchslidertest.html
The problem does not occur when I accessing the .html using http
http://hostnametothehtml/touchslidertest.html
I used chrome,firefox and safari on MacOS - using http solved the problem on all of them.
cause analysis
The browser handle the results gathered using the file-protocol different to results gathered via the http.
Careful: the following is only guessing, since I had not found anything about how any of the common browser handles the file-protocol.
Maybe the browser supports drag&drop for the file-protocol. This support may override the event handling of the page interpreter in the browser - such that the drag event on the image does never reach the DOM-event handling routine for the page.
I'm not able to click on the menu item (Create Defect...) as shown in the figure while testing my webapplication and getting below error
**org.openqa.selenium.ElementNotVisibleException: Cannot click on element**
the below code clicks on the image (hand image) as shown in the figure
driver.findElement(By.xpath("//div[#id='divToolbar']/div/table/tbody/tr/td[2]")).click();
and then the menu opens. Now I would like to click on the menu item.
I'm using below code for this
driver.findElement(By.xpath("html/body/div[10]/div/div/div/div/div/ul/li[1]")).click();
but I got the above mentioned exception
This what I have in the html:
<div class="mmenu" style="display: block; left: 49px; top: 37px;">
<div class="mmenu-content">
<div class="mmenu-border" style="width: 231px;">
<div class="mmenu-inset" style="width: 231px;">
<div class="mmenu-group first-child last-child">
<div class="mmenu-column first-child last-child">
<h3>
<ul>
<li id="liemx360120335239.81635" class="link" menuuid="emx360120335239.81635">
<span class="icon">
<span>Create Defect...</span>
</li>
<li id="liemx172704021676.66638" class="link" menuuid="emx172704021676.66638">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
Can you please suggest?
have you tried driver.findElement(By.xpath("//span[contains(text(),'Create Defect...']")).click();
I think your problem is that the second menu is invisible, and WebDriver throws ElementNotVisibleException if he operates on a locator which is not visible.
I think you have to keep the first menu open, as the second one to be visible when you try to click it.
I use Actions class.
Try to do following :
new Actions(getWebDriver()).moveToElement(driver.findElement(By.xpath(...))).perform();
and right after try to click the second locator. If you still have problem, try to chain both commands in the same action.