i am trying to add text in summer note text area but an exception is generated i have tried many method like relative and absolute xpath and class for web element but no one is working
Thread.sleep(3000);
driver.findElement(By.xpath("//div[contains(#class,'note-editable panel-body')]")).sendKeys("test");
/*
driver.findElement(By.xpath(".//*[#id='addTaskFrm']/div[2]/div/div/div/div[3]/div[3]")).sendKeys("test");
*/
/*
driver.findElement(By.xpath("html/body/div[96]/div/div/form/div[2]/div/div/div/div[3]/div[3]")).sendKeys("test");
*/
/*(WebDriverWait wait = new WebDriverWait(driver, 90);// 1 minute
wait.until(ExpectedConditions.visibilityOfElementLocated(By.className("note-editable panel-body")));
driver.findElement(By.className("note-editable panel-body")).sendKeys("cancel");*/
HTML code for summer note is
<div class="modal-body">
<div class="row">
<div class="col-xs-12 m-t-md">
<input id="note-title" name="name" value="Cancel Task" type="hidden">
<textarea id="modal-quick-note" class="form-control modal-description-box" name="description" rows="5" placeholder="Description" style="display: none;"></textarea>
<div class="note-editor note-frame panel panel-default">
<div class="note-editing-area">
<div class="note-handle">
<div class="note-control-selection" style="display: none;">
<div class="note-control-selection-bg"></div>
<div class="note-control-holder note-control-nw"></div>
<div class="note-control-holder note-control-ne"></div>
<div class="note-control-holder note-control-sw"></div>
<div class="note-control-sizing note-control-se"></div>
<div class="note-control-selection-info"></div>
</div>
</div>
<textarea class="note-codable"></textarea>
<div style="position: absolute; left: -100000px; opacity: 0;" contenteditable="true"></div>
<div class="note-editable panel-body" style="height: 235px;" contenteditable="true">
<p>
<p>
Exception in thread "main" org.openqa.selenium.ElementNotVisibleException: element not visible
Related
I am trying to add another code while closing of sweet alert2 modal.Because while closing sweet alert2 modal,it removes the content first then only it removes the modal container.So the problem is it first showing a blank container before closing of the modal.How can I solve this issue?
modal.component.ts
<swal #reqCallSwal (beforeOpen)="beforeOpen($event)" (open)="onOpen($event)" [showConfirmButton]="false" [showCancelButton]="false" [showCloseButton]="true" customClass="reqCallModalSwtOuter" (close)="modalReset($event)" [allowOutsideClick]="false">
<ng-container *swalPartial>
<!--<div class="scrollbarToggle"></div>-->
<div id="rcyc-modal-requestCall" *ngIf="apiResponseBStatus && apiResponseCStatus">
<section class="content_section">
<div class="l-container-wrapper">
<div class="l-container intro-header leadinto">
<div class="l-container row">
<div *ngIf="apiResponseBStatus" class="body-copy">
<div class="headline-block c01_D intro-header leadinto">
<!-- <h4 *ngIf="apiResponseB?.field_sub_header" [title]="apiresponseB?.field_sub_header | convertHtml" [innerHtml]="apiResponseB?.field_sub_header"></h4> -->
<h1 *ngIf="apiResponseB?.title" [title]="apiresponseB?.title | convertHtml" class="headline" [innerHtml]="apiResponseB?.title"></h1>
</div>
<p *ngIf="apiResponseB?.field_summery" [innerHtml]="apiResponseB?.field_summery"></p>
</div>
<div class="row is-10-2">
<div class="column is-9 lead_form_right">
<form id="requestCallFormId" name="requestCallForm" [formGroup]="lead_gen_form" novalidate autocomplete="false">
<fieldset>
<div class="basic-form_group lead_form_field">
<!-- name_sec -->
<div class="row is-6-6">
<div class="column is-6 form_fields formContainer">
<label class="basic-form_label form_label basic-form_label-required">First Name</label>
<input id="firstNameId" class="basic-form_input basic-form_input-half" type="text" formControlName="firstname" pattern="[a-zA-Z ]*" placeholder="First Name" maxlength="30">
<span *ngIf="!lead_gen_form.controls.firstname.valid && !fnameWhitespaceError && lead_gen_form.controls.firstname.touched" >This field is required</span>
<span *ngIf="fnameWhitespaceError" [innerHtml]="fnameValidationMsg"></span>
</div>
<div class="column is-6 form_fields formContainer">
<label class="basic-form_label form_label basic-form_label-required">Last Name</label>
<input id="lastNameId" class="basic-form_input basic-form_input-half" type="text" formControlName="lastname" pattern="[a-zA-Z ]*" placeholder="Last Name" maxlength="60">
<span *ngIf="!lead_gen_form.controls.lastname.valid && !lnameWhitespaceError && lead_gen_form.controls.lastname.touched" >This field is required</span>
<span *ngIf="lnameWhitespaceError" [innerHtml]="lnameValidationMsg"></span>
</div>
</div>
<!-- name_sec -->
</div>
</div>
</fieldset>
</form>
<div class="row is-6-6">
<!-- <p class="succ" *ngIf="succmsg">THANK YOU FOR REGISTERING</p> -->
<div class="column is-6">
<div class="row is-6-6">
<div class="column is-6 submit_btn">
<input type="submit" id="submitId" (click)="leadGenSubmit()" [disabled]="lead_gen_form.invalid || zipcodereq || emailErr || countryerr || fnameWhitespaceError || lnameWhitespaceError || lead_gen_form.controls.country.value==0" value="Submit">
</div>
<div class="column is-6 clear_btn">
<input type="reset" id="resetId" (click)="ngOnInit()" value="Clear">
</div>
</div>
</div>
<div class="column is-6"></div>
</div>
<div *ngIf="apiResponseCStatus" [innerHtml]="apiResponseC.field_summery"></div>
</div>
<div class="column is-3"></div>
</div>
</div>
</div>
</div>
</section>
</div>
</ng-container>
</swal>
<!-- <button (click)="modalOpen()">click</button> -->
in the above code I am added my angular templates into the sweet alert2 modal with the help of 'swalpartial' directive.I also changed the animation of opening and closing of modal with the help of css animation.
**modal.css**
div.swal2-show{
/*-webkit-animation: fadein 1.3s;
animation:fadein 1.3s;*/
-webkit-animation:zoomin 0.5s ease-in;/* Safari, Chrome and Opera > 12.1 */
-moz-animation:zoomin 0.5s ease-in;/* Firefox < 16 */
-ms-animation:zoomin 0.5s ease-in;/* Internet Explorer */
-o-animation:zoomin 0.5s ease-in;/* Opera < 12.1 */
animation:zoomin 0.5s ease-in;
}
div.swal2-hide {
-webkit-animation:zoomin 0.5s ease-out;
animation:zoomout 0.5s ease-in;
}
the animation works nicely,but when I close the modal it gets blank and then the animation will work.I found the reason after I pass an event into the close() of sweet alert2 modal.When closing the modal it removes a div element by default whose class name is 'swal2-content' where all my modal contents are inside this div then only it removes all class related to sweet alert2.How can I prevent removing of 'swal2-content' class firstly while closing the modal?
I am using Firefox Quantum.
It's something different than Mozzila firefox. I can't use firebug now as it is not supporting.How can i verify that the i am on a different frame.
As currently i can't write on the popup message. Maybe it is on different frame.
Can anyone explain me with proper example.
The HTMLM of the code is:-
<div class="store_form">
<div class="row">
<div class="col s12 m12 marg-top">
<div class="row">
<div class="col s12 m6 store_band_contact">
</div>
<div class="col s12 m6 store_add_left">
</div>
</div>
</div>
<form id="form_contact" class="col s12 m12" novalidate="novalidate">
<div id="errorMsg"></div>
<!-- <div class="row">
<p class="col s12" style="font-size: 15px;" >
<strong id="buyer_company"></strong>
</p>
</div> -->
<!-- <div class="row">
<p class="col s12" id="">Subject: Request to remove my bid
</p>
</div> -->
<div class="row">
<div class="input-field col s12">
<span class="editFiledHeading">Request to remove my bid</span>
<!-- Contact Seller -->
<textarea name="comment" maxlength="20000" id="comment" class="ckeditor" placeholder="" style="visibility: hidden; display: none;"></textarea><div id="cke_comment" class="cke_1 cke cke_reset cke_chrome cke_editor_comment cke_ltr cke_browser_webkit" dir="ltr" lang="en" role="application" aria-labelledby="cke_comment_arialbl" style="width: 99.8%;"><span id="cke_comment_arialbl" class="cke_voice_label">Rich Text Editor, comment</span><div class="cke_inner cke_reset" role="presentation"><span id="cke_1_top" class="cke_top cke_reset_all" role="presentation" style="height: auto; user-select: none;"><span id="cke_12" class="cke_voice_label">Editor toolbars</span><span id="cke_1_toolbox" class="cke_toolbox" role="group" aria-labelledby="cke_12" onmousedown="return false;"></span></span><div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 200px;"><span id="cke_16" class="cke_voice_label">Press ALT 0 for help</span><iframe src="" frameborder="0" class="cke_wysiwyg_frame cke_reset" title="Rich Text Editor, comment" aria-describedby="cke_16" tabindex="0" allowtransparency="true" style="width: 439px; height: 100%;"></iframe></div></div></div>
<input type="hidden" name="bid" id="bid_id" value="1035">
</div>
</div>
<div class="row" style="margin-top: 10px;">
<div class="col s6">
<p style="margin: 5px 0 0;">
<input type="checkbox" name="is_copy" id="is_copy" value="1">
<label for="is_copy">Send me a copy</label>
</p>
</div>
<div class="col s6">
<span class="right remainingLimit" id="comment_label" data-length="2500">Remaining: 2500</span>
</div>
</div>
<div class="row">
<div class="col s12">
<p class="defaultP">
If you like to remove a bid you can do that by
sending the request to the seller. Please make
sure that you state the reason for doing this.
Obvious accidents by using the wrong value are
easy to justify.
Please note that it is up to the seller to accept
or decline your request!
</p>
</div>
</div>
<div class="row">
<div class="col s12 center" style="margin: 20px 0 15px;">
<button class="transParentBtnSmall">Submit</button>
</div>
</div>
</form>
</div>
</div>
Here if I type in something then the list of airports matching that text are shown up!! So is there a general way by which I can select the xpath for it? Here is the screenshot.enter image description here
and here is the HTML:
<document>
<html lang="en">
<head>
<body>
<!-- Keeping body block so that it can be used by public site as well. -->
<nav class="navbar navbar-default navbar-static-top">
<div id="timezone-change-dialog" class="col-md-12 content content-confirmation hidden">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 wizard-steps-container">
<div class="col-md-12 content">
<div class="row">
<div class="col-md-12">
<form id="id_create-shipment-step-2" class="form-horizontal has-validation-callback fv-form fv-form-bootstrap" role="form" method="post" enctype="multipart/form-data" novalidate="novalidate">
<button class="fv-hidden-submit" type="submit" style="display: none; width: 0px; height: 0px;"/>
<input name="csrfmiddlewaretoken" value="gk0wq70Am8U0sKat5IJ6f8nKquxYlZaz" autocomplete="off" type="hidden"/>
<div class="form-group">
<div class="form-group">
<div class="form-group">
<div id="pickup_airport" class="form-group" style="display: block;">
<label class="col-sm-4 control-label" for="">
<div class="col-sm-6 has-success">
<div class="typeahead-container result hint">
<div class="typeahead-field">
<div class="typeahead-result">
<ul class="typeahead-list">
<li class="typeahead-item">
<a href="javascript:;" data-group="airports" data-index="0">
<span>
(
<strong>AIR</strong>
) Aripuana
<strong>Air</strong>
port, Aripuana, MT, BR
</span>
</a>
</li>
<li class="typeahead-item">
<li class="typeahead-item active">
If the span contains text and it is under li tag then you can do that like this.
//span[contains(text(),'airports')]/parent::li
I am New to selenium: I have this source and am trying click on a button using xpath with selenium webdriver. This is the button(last line in the html) that am trying to click on:
I use this xpath: "//div[#id='innerBody']/div[4]/div/div/ul/li[3]/button"
and it gives me unable to locate element.
Any idea why and how I should go about it.
<document>
<html class="FullPage" xmlns="http://www.w3.org/1999/xhtml" style="">
<head>
<body class="brand brand-mastwide FullPage no-footer width-hd" style="">
<div id="cboxOverlay" style="display: none;"/>
<div id="colorbox" class="" style="padding-bottom: 2px; padding-right: 2px; display: none;">
<div id="masthead" class="masthead full-width">
<div id="toast-absolute" class="full-width">
<!-- Content -->
<div id="outer-outer" class="with-nav">
<div id="outer-wrapper" class="full-width">
<a name="pageTop"/>
<div class="main-wrapper">
<div class="inner">
<div id="applicationHost">
<div data-bind="router: router" data-view="_App/AppShell" style="" data-active-view="true">
<div class="durandal-wrapper" data-view="_App/Home/HomeShell" style="" data-active-view="true">
<link rel="stylesheet" href="/cache/sf/_App/Home/HomeShell.css"/>
<link rel="stylesheet" href="/cache/sf/css/lib/joyride-2.1.css"/>
<div id="regionMain" class="clear-block with-side with-side-left" data-bind="css:{'clear-block with-side with-side-left': ShowLeftNavigation()}">
<div class="content-pane main">
<div class="inner-content-pane main">
<div data-bind="compose: Message"/>
<div class="router" data-bind="router: router">
<div class="durandal-wrapper" data-view="_App/Home/Filebox/Filebox" style="" data-active-view="true">
<h1 data-bind="text: Title">Bestandsvak voor satish vanahalli</h1>
<link href="/cache/f69bb3f534fb459062226526576bc4dea7e8fe7e/css/lib/jqui/jquery-ui-1.10.0.sf.css" type="text/css" rel="stylesheet"/>
<br/>
<div id="innerBody" class="file-box-container">
<div class="errortip" data-bind="text: ErrorMessage, visible: ErrorMessage" style="display: none;"/>
<div class="clear-block">
<div class="upload-button">
<div data-bind="compose: FileList">
<div class="c-content" data-view="_App/Home/Common/FileList/FileList" style="" data-active-view="true">
<div class="secondary-ctrl btnl-row title-noborder clear-block" data-bind="css: { hidden: !ShowSecondary }">
<ul class="context-actions" data-bind="visible: Capabilities.AllowCheckboxes, foreach: CurrentActions">
<li class="hover-list">
<li class="hover-list">
<li class="hover-list">
***<button class="txt context-action" data-bind="click: Click">***
Try this xpath:
//ul[#class='context-actions']/li[3]/button[#class='txt context-action][3]
As per your comments for question, if you want to click on the 3rd button in the list, please try below xpath; I have just tweaked #Saritha's :
(//button[#class='txt context-action'])[3]
This will click on the 3rd button in the page (in the chronological order of DOM representation) with class as txt context-action.
Try this xpath:
//*[#id="innerBody"]/div/div/div/div/div/div/ul/li[3]/button
I am using CSS selectors with Selenium and Cucumber. When a locator doesn't work I test it out using the console of the Chrome Developer Tools. I keep encountering a behavior I don't understand (as in why does it do what it is doing and not what I need it to do...). Please look at these locators:
div.view_header ~ div input.my_button
div:contains(My Header Title) ~ div input.my_button
div:contains(My Header Title) ~ div div div input.my_button
In my DOM the element matching the first part of each of those locators is the same...
<div class="view_header foo"> My Header Title </div>
The issue is that only locators #1 & #3 above will actually match anything. Does anybody know why this is true. I realize that div:contains(foo) will match not only the div that actually contains foo but all parent divs as well but it seems to me that the rest of the locator elements should be sorting it out so that it should work.
I'm just looking for any insight and possibly suggestions for a way to make sure that the 'my_button' I am clicking is the one under 'My Header Title' and not a 'my_button' somewhere else on the page (and the only easy way to distinguish them is by the header they are under) while eliminating the seemingly excess DOM structure in the locator so as to make it more likely to be reusable.
<head>
<body class="bp">
<div style="left: -100em; position: absolute; width: 100em;"></div>
<input class="refresh_marker" type="text" value="no" style="display:none">
<div class="container">
<div id="nav_bar">
<div id="user_bar">
<div id="wrapper" style="border-radius: 10px 10px 10px 10px;">
<div class="content">
<div class="page_title"> Title </div>
<div></div>
<a class="change_tracker_link"> </a>
<div class="breadcrumb_trail">
<style type="text/css">
<div id="dialog_no_new_assoc" class="hide" title="No Associations Selected"></div>
<div class="organizer_widget root_organizer" title="WorkflowItem" style="">
<input id="data_classifier" type="hidden" value="Workflow::WorkflowItem">
<input id="data_id" type="hidden" value="34">
<input id="data_getter" type="hidden">
<input id="collection_vertex_id" type="hidden" value="4cb1ecc300fa5f77844b1e87431d0a25390c1c77">
<input id="view-name" type="hidden" value="EnterPaperInformation">
<div class="object organizer">
<div class="clear"></div>
<div class="interior">
<form method="POST" enctype="multipart/form-data">
<input type="hidden" value="4cb1ecc300fa5f77844b1e87431d0a25390c1c77" name="vertex_id">
<input type="submit" value="Save" style="display: none;" name="submit_form">
<div class="organizer_header view_header"> My Header Title </div>
<div class="organizer_widget" title="Citation" style="">
<input id="data_classifier" type="hidden" value="Bibliography::Citation">
<input id="data_id" type="hidden" value="10">
<input id="data_getter" type="hidden" value="citation">
<input id="collection_vertex_id" type="hidden" value="5376dcc81102a5d76bf829513b096be8f67e560d">
<input id="view-name" type="hidden" value="CitationEntrySummary">
<div id="citation" class="object organizer">
<div class="clear"></div>
<div class="interior">
<div id="Citation___id_widget" class="widget_row numeric">
<div id="Citation___title_widget" class="widget_row string">
<div id="Citation___abbreviated_title_widget" class="widget_row string">
<div id="Citation___authors_display_string_widget" class="widget_row string">
<div id="Citation___language_widget" class="widget_row choice">
<div id="Citation___link_widget" class="widget_row link">
<input type="hidden" value="Bibliography::JournalArticle___10" name="check_5376dcc81102a5d76bf829513b096be8f67e560d[]">
<input id="ba_citation" class="my_button" type="button" value="Break Associations" name="break_assoc_5376dcc81102a5d76bf829513b096be8f67e560d">
<div class="clear"></div>
<input type="hidden" value="5376dcc81102a5d76bf829513b096be8f67e560d" name="vertices[]">
</div>
...
The usual thing I do when I find myself in this kind of trouble is to look at the spec.
As you probably know, there's none for :contains() in the current spec and therefore you rely on undocumented, unspeced features of a particular browser/parser. It should work, but it doesn't - obviously the implementation wasn't complete. And now the pseudo-class is gone.
Could you go for an XPath instead? Either by internal Selenium methods or JavaScript. This XPath is the same as your CSS selector number 2:
//div[contains(text(),'My Header Title')]/following-sibling::div//input[contains(#class,'my_button')]
EDIT
After your comment showed me that we're talking about Selenium RC and, therefore, Sizzle, I dug deeper.
I took your example HTML, stripped it from the hidden and (seemingly) needless elements, and was left with this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="sizzle.js" type="text/javascript"></script>
</head>
<body class="bp">
<div class="container">
<div id="nav_bar">
<div id="user_bar">
<div id="wrapper" style="border-radius: 10px 10px 10px 10px;">
<div class="content">
<div class="breadcrumb_trail">
<div class="organizer_widget root_organizer" title="WorkflowItem" style="">
<div class="object organizer">
<div class="interior">
<form method="POST" enctype="multipart/form-data">
<div class="organizer_header view_header"> My Header Title </div>
<div class="organizer_widget" title="Citation" style="">
<div id="citation" class="object organizer">
<div class="clear"></div>
<div class="interior">
<div id="Citation___id_widget" class="widget_row numeric">
<div id="Citation___title_widget" class="widget_row string">
<div id="Citation___abbreviated_title_widget" class="widget_row string">
<div id="Citation___authors_display_string_widget" class="widget_row string">
<div id="Citation___language_widget" class="widget_row choice">
<div id="Citation___link_widget" class="widget_row link">
<input id="ba_citation" class="my_button" type="button" value="Break Associations" name="break_assoc_5376dcc81102a5d76bf829513b096be8f67e560d" />
<div class="clear"></div>
</div></div></div></div></div></div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I downloaded the latest Sizzle and I obtained the version of Sizzle that is actually used by Selenium in the current release.
Turns out those two are very different.
E.g. the contains implementation of current Sizzle:
return ~( elem.textContent || elem.innerText || getText( elem ) ).indexOf( match[3] );
and the implementation Selenium uses:
return (elem.textContent || elem.innerText || getText([ elem ]) || "").indexOf(match[3]) >= 0;
I tried both implementations on my test document, results can be seen here (click to enlarge):
Current Sizzle - matches all perfectly
Selenium's Sizzle - matches 1 out of 4
The results say it all. Selenium uses an old version of Sizzle that is somehow imperfect in handling of :contains() pseudo-class. The current Sizzle version doesn't suffer from the bug and is able to find all elements well.
Now, you can do any of these:
File a Selenium bug.
Use XPath as a workaround.
Switch the sizzle.js file in your Selenium package.
#Selenium #Webdriver handle only HTML elements but with using java script executor It's possible to handle #pseudo elements in selenium #webdriver.
Ex: :after , :before etc
String script = "return window.getComputedStyle(document.querySelector('Enter root classname here'),':after / :before').getPropertyValue('content')";
Thread.sleep(3000);
JavascriptExecutor js = (JavascriptExecutor) driver;
String content = (String) js.executeScript(script);
System.out.println(content);