Selenium:- Popup handelling in HTML - selenium

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>

Related

vba code to click on each tabs( View Contact) in webpage using selenium vba

I want to click on all View Contact tabs in webpage,there are 10 View Contact tabs in webpage. each tabs having the same html code
Please see the image of webpage.
https://i.stack.imgur.com/vTocP.jpg
my html code:-
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
The HTML is :
<div id="226235653" class="lmsSearchTpl1">
<div class="lmsSearchTplDetail">
<div class="lmsTplQualify">
<span class="hasEllipse">
<i class="lmsIcons requirement-verified-tuple"></i>
<div id="expelipse" class="infoTip f12 ital tool_tip6" style="width: 200px; top: 40px; left: -15px; display: none;"><em class="upPin"></em><em class="text">Verified: Lead’s information has been verified by our system.</em></div>
</span>
<!-- Classes of such icons : mobile-verified-tuple, mobile-exist-tuple, requirement-verified-tuple -->
</div>
<div class="clearAfter">
<div class="bulkSmsTupleCheckboxDiv lf" style="width: 4%;display: none;">
<input type="checkbox" class="bulkSmsTupleCheckbox" id="tuplecheckbox_226235653" value="226235653_27395571" onclick="leadSrch.listUnlistForSms(this)">
</div>
<div class="lf lmsIndName">
Arjun Singh </div>
<div class="rf lmsTplDate">
<span>Received : </span>
<span class="sb" style="color: #666;">10 Dec 2017</span>
</div>
</div>
<div class="clearAfter rel">
<div class="lf lmsTypeAndAddress f13">
<div>
<span class="sb"><span>Residential Apartment</span></span>
<span>for</span>
<span class="sb">Rent</span>
</div>
<div>
<span>City :</span>
<span class="sb"><span>Kolkata South</span></span>
<span> | </span>
<span>Locality : </span>
<span class="sb"><span>Tollygunge</span></span>
</div>
</div>
<div class="rf">
<i></i>
</div>
</div>
<div class="clr" style="height: 10px;"></div>
<div class="clearAfter tabularFacts">
<div>
<div>Min Budget</div>
<div>5,000 </div>
</div>
<div>
<div>Bedrooms</div>
<div>2 BHK</div>
</div>
<div>
<div>Car Parking</div>
<div>----</div>
</div>
<div>
<div>Furnishing</div>
<div><span>Unfurnished</span></div>
</div>
<div>
<div>Tenant Type</div>
<div>----</div>
</div>
<div>
<div>Projects</div>
<div>----</div>
</div>
<div>
<div>Preferred Call Time</div>
<div>Any Time</div>
</div>
<div>
<div>Site Visit </div>
<div>----</div>
</div>
</div>
<div class="clearAfter tabularOtherFacts mt20">
<div>
<span>Requirements : </span>
<span>----</span>
</div>
</div>
</div>
<div class="lmsViewMoreLine clearAfter">
<div class="lf" style="padding: 0px 15px 5px 15px;">
<a id="vmr_226235653" href="javascript:void(0);" class="vmr inlineMiddleChild lmsViewMore">
<span>
View more requirements from this buyer
</span>
<i class="lmsIcons lmsBlueArrow ml5"></i>
</a>
<div class="clr" style="height: 10px;"></div>
<div id="vmrWrap_226235653" class="otherAssociateLeads" style="display:none;">
<div class="clr pdt8"></div>
</div>
</div>
<div class="rf lmsSearchControls">
<div class="lmsCredits">
<span class=" numCredits">1.00</span>
<span>Credit(s)</span>
</div>
<div class="lmsLookout">
<i class="lmsEye lmsIcons"></i>
<span id="viewTime">0 Time(s)</span>
</div>
<div>
<input type="button" class="boxOpener btn blue b" style="width: 150px;font-size: 14px;" value="View Contact">
</div>
</div>
<div class="lmsTplConfirm clr confirmBox" style="background-color: rgba(134, 134, 134, 0.05);display: none;">
<div class="lmsTplConfirmQues">
<div class="f13 grey">
You cannot view this lead's contact details.
</div>
</div>
<div class="lmsTplConfirmAns clearAfter" style="display: none">
<div class=" clearfix" style="display:block">
<div class="clr f14 lf grey"> Some error has occurred. Please refresh your search and try again. </div>
</div>
</div>
</div>
</div>
</div>
To click the View Contact button for Arjun Singh you can use the following xpath :
"//div[#class='lf lmsIndName']//following::input[#class='boxOpener btn blue b']"

MaterializeCSS - Content showing outside container

I'm using MaterializeCSS for creating layouts, I've got a container which contains 2 rows but any content which is not in column displays outside of container.
Here is my code:-
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">World
<div class="col s12">Hello</div>
</div>
</div>
</div>
And here is how it looks:-
Container Layout
Why is this happening even though my content is inside container and should also display within container boundaries?
Edit:
<div class="add-arena grey lighten-3">
<div class="row">
<div class="col s12 center deep-orange white-text">Add Arena</div>
</div>
<div class="row">
<div class="add-arena-image-holder col s4">
<form action="#">
<div class="file-field input-field col s11">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
</div>
<div class="add-arena-description col s8">
<div class="row">
<div class="input-field col s6">
<input placeholder="What will it be called?" id="first_name" type="text" class="validate">
<label for="first_name">Arena Name</label>
</div>
<div class="input-field col s6">
<input placeholder="Arena Number" id="first_name" type="text" class="validate">
<label for="first_name">Arena</label>
</div>
</div>
<div class="row">
<div class="col s3 right">
<a class="waves-effect waves-light btn deep-orange"><i class="material-icons left">send</i>Add</a>
</div>
</div>
</div>
</div>
</div>
All content should be in the actual cols as the rows apply negative margins to stretch them to the full width. Always put the content in the col's.
https://codepen.io/anon/pen/EXZzVr
<div class="container">
<div style="border: 1px solid #b1b1b1;">
<div class="row">
<div class="col s12">Hello</div>
</div>
<div class="row">
<div class="col s12">Hello World</div>
</div>
</div>
</div>
What exactly do you want to achieve?
Take a look at following lines:
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/sass/components/_grid.scss#L17-L18
https://github.com/Dogfalo/materialize/blob/0e13b80f6bfee1700dd2c2aa49494a44c8a61acb/dist/css/materialize.css#L3367-L3368

I want to select xpath of the following dropdown list of Airports

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

Bootstrap 3 - Sizing & alignment issues

I am integrating Bootstrap 3 with Kendo UI controls.
I am having alignment issues with multiple form-horizontal sections, here is the HTML
<ul id="acc-form-panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">Project Info</span>
<section style="padding:10px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="procod">Project Code</label>
<div class="col-sm-8">
<input id="procod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-4" for="proshocod">Project Short Code</label>
<div class="col-sm-8">
<input id="proshocod" style="width: 25%;"/>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-horizontal form-widgets col-sm-12">
<div class="form-group">
<label class="control-label col-sm-2" for="protit">Project Title</label>
<div class="col-sm-10">
<input id="protit" style="width: 75%;" />
</div>
</div>
</div>
</section>
</li>
<li class="">
<span class="k-link">Users Info</span>
<div class="row" style="margin: 20px 0;">
<div class="form-horizontal form-widgets col-sm-6">
<div class="form-group">
<label class="control-label col-sm-3" for="name">Name</label>
<div class="col-sm-8">
<input id="name" value="Bilal Haidar" style="width: 75%;" /> <!-- styles="width:100%;" -->
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="birthday">Birthday</label>
<div class="col-sm-8">
<input id="birthday" type="date" value="10/09/1979" style="width: 75%;" />
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="gender">Gender</label>
<div class="col-sm-8">
<select id="gender" style="width: 75%;"><option value="Male" selected="selected">Male</option><option value="Female">Female</option></select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="language">Language</label>
<div class="col-sm-8">
<select id="language" style="width: 75%;"><option value="English" selected="selected">English</option><option value="German">German</option></select>
</div>
</div>
</div>
</div>
</li>
</ul>
Anyone can tell me what's wrong with the alignment?
Thanks
First I will advice you strip your code of all inline styles, and the put every successive that should be on the same column in a div / section of class row. Bootstrap is based on the 12-grid system. That means once 12 columns are complete, the last element is dropped to a new line. Try these and see what will happen.

Fill ion-content with div

I have a ion content that I fill with a div. This works great when the screen size is larger than the div content. If it is smaller, then it assigns the height of the view, and when you scroll down it doesn't fill the whole content. It can be seen in the following example:
This is basically the html:
<ion-header>
<div id="headerTab" [class]="loginStyle">
<ul style="justify-content: center; display: flex;" class="tabs z-depth-1">
<li class="tab col"><a (click)="setTabIndex(0)" class="active" href="#enter">ENTRAR</a></li>
<li class="tab col"><a (click)="setTabIndex(1)" href="#signup">REGISTRO</a></li>
</ul>
</div>
</ion-header>
<ion-content>
<div id="background" [class]="loginStyle" style="margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center;">
<div class="valign-wrapper center-align tabs-content" *ngIf="loginTabVisible" [#showAnimation] (#showAnimation.done)="reloadTabs()">
<form *ngIf="loginVisible" [#showAnimation] (#showAnimation.done)="reloadLoginPage()">
<div class="row">
<div class="input-field col s12">
<input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
<label for="correo">Email</label>
</div>
<div class="input-field col s12">
<input id="pass1" type="password" class="validate" [(ngModel)]="userPassword" name="userPassword">
<label for="pass1">Contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="btn bg_color_s" (click)="login()">Continuar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="setLoginPageIndex(1)" class="">¿Olvidaste tu contraseña?</a>
</div>
</div>
</form>
<form *ngIf="resetPasswordVisible" [#showAnimation] (#showAnimation.done)="reloadLoginPage()">
<div class="row">
<div class="input-field col s12" style="color: #fff">
<p> Por favor, introduzca su correo. Le enviaremos un email con insrucciones para restablecer su contraseña </p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="correo" type="email" class="validate" [(ngModel)]="userEmail" name="userEmail">
<label for="correo">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a class="btn bg_color_s" (click)="login()">Recuperar contraseña</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="setLoginPageIndex(0)" class="">Volver al inicio de sesión</a>
</div>
</div>
</form>
</div>
<div class="center-align tabs-content" *ngIf="registerTabVisible" [#showAnimation] (#showAnimation.done)="reloadTabs()">
<form *ngIf="registerVisible" [#showAnimation] (#showAnimation.done)="reloadRegisterPage()">
<div class="row">
<div class="input-field col s12">
<input name="newUser.firstName" [(ngModel)]="newUser.firstName" id="first_name" type="text" class="validate">
<label for="first_name">Nombres</label>
</div>
<div class="input-field col s12">
<input name="newUser.lastName" [(ngModel)]="newUser.lastName" id="last_name" type="text" class="validate">
<label for="last_name">Apellidos</label>
</div>
<div class="input-field col s12">
<input name="newUser.birthday" [(ngModel)]="newUser.birthday" id="birthday" type="text" class="validate datepicker">
<label for="birthday">Fecha de nacimiento</label>
</div>
<div class="input-field col s12">
<input name="newUser.email" [(ngModel)]="newUser.email" id="correor" type="email" class="validate">
<label for="correor">Email</label>
</div>
<div class="input-field col s12">
<input name="password" [(ngModel)]="newUser.password" id="passr1" type="password" class="validate">
<label for="passr1">Contraseña</label>
</div>
<div class="input-field col s12">
<input name="passwordCheck" [(ngModel)]="passwordCheck" id="passr2" type="password" class="validate">
<label for="passr2">Repita contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="signUp()" class="btn bg_color_s">continuar</a>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
</div>
</div>
</form>
<form *ngIf="proTypeVisible" [#showAnimation] (#showAnimation.done)="reloadRegisterPage()">
<div class="row">
<div style="width:90%;margin:auto">
<p>
<label>
<input name="group1" type="radio" />
<span>Jugador Profesional</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Campo de Golf/Pitch and putt</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Tienda de Golf</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>Otros servicios relacionados</span>
</label>
</p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
continuar
</div>
</div>
<div class="row">
<div class="input-field col s12">
<a (click)="toggleRegisterPro()" class="">{{ toggleRegisterProMessage }}</a>
</div>
</div>
</form>
</div>
</div>
</ion-content>
The problem can be summed up to:
<ion-content>
<div style="height:100%; background-color: red">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>
The problem is that the content overflows the div. We can make use of overflow: overlay to solve the issue.
Simply add in the container div this property:
<ion-content>
<div style="height:100%; background-color: red; overflow: overlay">
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
<p> This is some content </p>
</div>
</ion-content>