<!DOCTYPE html>
<html lang="en">
<head>
<body class="layout-two-column unibet uMyAccount">
<div class="tooltip-container">
<div id="tooltip" class="tooltip tooltip-error right-center" style="top: 466px; left: 709px; display: none;">
<div class="tooltip-content gutter-3 icon icon-small icon-error">DANISH SITE SPECIFIC</div>
<div class="tooltip-pointer"></div>
<div class="tooltip-pointer-decoration"></div>
</div>
</div>
<div id="window">
<div id="container" class="lobby-theme-3">
<header id="header">
<nav id="nav-main">
<div id="no-sub-nav"></div>
<div id="main" role="main">
<div class="stack-wrap gutter-col-wrap-2">
Tried the following to get the text "DANISH SITE SPECIFIC":
//body[contains(#class,'layout-two-column unibet uMyAccount')]//div[contains(#id,'tooltip')]//div[contains(#class,'tooltip-content')]
But the above is not working when tried to get the text through .getText() call. Please help.
This code will work as a charm, keeping your code clean, and avoiding problems if you decide to insert/change the classes inside the element:
WebElement tooltip = driver.findElement(By.id("tooltip"));
String textYouNeed = tooltip.findElement(By.className("tooltip-content")).getText();
Use the below statement to get the tooltip text.
driver.findElement(By.className("tooltip-content.gutter-3.icon.icon-small.icon-error")).getText();
try this it works:)
WebElement tip = driver.findElement(By.className("tooltip-content
gutter-3 icon icon-small icon-error");
String textTip = tip.getText();
System.out.println(textTip);
Related
I'm trying to display a Banner <div> after 2 rows of 4 x "col-md-3", followed by another 2 Rows - so the resulting markup would look like:
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3">7</div>
<div class="col-md-3">8</div>
<div class="col-md-12" id="Banner">Banner</div>
<div class="col-md-3">9</div>
<div class="col-md-3">10</div>
<div class="col-md-3">11</div>
<div class="col-md-3">12</div>
<div class="col-md-3">13</div>
<div class="col-md-3">14</div>
<div class="col-md-3">15</div>
<div class="col-md-3">16</div>
Trying to simulate this using AngularJS so would have to use ng-repeat - but cannot seem to get this working. Any help appreciated: My Plunker
<div ng-repeat="n in Numbers">
<div class="col-md-3">{{n}}</div>
</div>
There are just a couple of problems with your plunker. First maincontroller.js is missing the .js extension, so it is never loaded.
Next all of the references to load angular should start with https instead of just http.
To display the banner after a certain number of rows place it within the first div and use something like:
<div class="col-md-12" id="Banner" ng-if="$index==5">Banner</div>
Not sure if 5 is the number you want there or if you want to use some kind of expression to see if ng-if is divisible by a certain value, but using $index and ng-if should get you there.
You could use ng-repeat-start and ng-include with a ng-if to conditionally include the banner if it's at the correct index with n===8.
Please have a look at the code below or in this plunkr.
angular.module("app", [])
.controller("MainController", mainController);
function mainController($scope) {
$scope.Numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-controller="MainController" ng-app="app">
<h1>Demo</h1>
<div class="col-md-3" ng-repeat-start="n in Numbers">{{n}}</div>
<div ng-include="'banner.html'" ng-if="(n === 8)" ng-repeat-end></div>
<script type="text/ng-template" id="banner.html">
<div class="col-md-12" id="Banner">Banner</div>
</script>
</div>
how i add text in p tag?
<div id="cke_1_contents" class="cke_contents cke_reset" role="presentation" style="height: 350px;"><span id="cke_44" class="cke_voice_label">Press ALT 0 for help</span>
<iframe class="cke_wysiwyg_frame cke_reset" frameborder="0" src="" style="width: 100%; height: 100%;" title="Rich Text Editor, editor2" aria-describedby="cke_106" tabindex="0" allowtransparency="true">
<html lang="en" dir="ltr">
<head>
<body class="cke_editable cke_editable_themed cke_contents_ltr cke_show_borders" contenteditable="true" spellcheck="true">
<p>
<br type="_moz">
</p>
</body>
</html>
</iframe>
</div>
i use this code but the give error
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
You'll need to switch to the iframe's page context to do this:
browser.switchTo().frame($('.cke_wysiwyg_frame'))
var p = element(by.css('.cke_editable p'));
p.sendKeys('This is a peragraph tag');
// switch back to the "parent page" context
browser.switchTo().defaultContent()
I am using the flexslider with angularjs, so the examples form the website with jquery are not really helpful. So I have implemented the slider:
HTML
<div>
<flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
<li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
<img ng-src="{{imagesUrl}}{{image.custom}}">
</li>
</flex-slider>
</div>
in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)
and have overwritten CSS for size:
.flexslider {
width: 400px;
height: 400px;
}
.flexslider .slides img {
width: 400px;
height: 400px;
}
.flex-direction-nav a {
line-height: 40px;
}
I have 12 thumbnails, clicking them works fine, does exactly what they are supposed to do; the problem is that they are all visible, shown on three rows. I have added the requested classes:
<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />
and scripts:
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>
don't know what else to do, and I find documentation (examples) for angular very poor. Can anyone please help? spent already a day on it...
EDIT
plunker for demo: http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD
SECOND EDIT
ok, I have found a plunker with a working carousel for thumbnails, but it basically builds two flex sliders. is this the only way? when in the example on git (https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html) they use my version? plunker: http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr
See the Plunker I created. This is a modification of your Plunker attached. Per the implementation, jQuery or not, you need to split the images and the thumbnail. http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>
Could any one please help me in clicking the link (Images1) under a div?
<div class="test1"><a class="k1">Images1</a></div>
<div class="test1"><a class="k1">Images2</a></div>
Note: Not working
var imagesLink = driver.FindElements(By.ClassName("k1"))[0];
imagesLink.Click();
I am getting an error:
{Error "Compound class names are not supported. Consider searching for one class name and filtering the results."}
First of all, if your page is in an iframe, you need to switch to the frame first.
Given the html from comment as below:
<html lang="en" xmlns="w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="hdtb" role="navigation">
<div id="hdtbSum">
<div id="hdtb_msb">
<div class="hdtb_mitem hdtb_msel"> </div>
<div class="hdtb_mitem"> <a class="q qs" href="yahoo.co.in">Yahoo</a> </div>
<div class="hdtb_mitem"><a class="q qs" href="gmail.com">Gmail</a></div>
<div class="hdtb_mitem"><a class="q qs" href="hotmail.com">Hotmail</a> </div>
</div>
</div>
</div>
</div>
</body>
</html>
Multiple ways of finding the Gmail link:
driver.FindElement(By.CssSelector(".hdtb_mitem > a[href='gmail.com']")).Click();
// alternatives:
// driver.FindElements(By.CssSelector(".hdtb_mitem > a"))[1].Click();
driver.FindElement(By.XPath("//div[#class='hdtb_mitem']/a[#href='gmail.com']")).Click();
// alternatives:
// driver.FindElement(By.XPath("//div[#class='hdtb_mitem']/a[text()='Gmail']")).Click();
// driver.FindElements(By.XPath("//div[#class='hdtb_mitem']/a"))[1].Click();
// driver.FindElement(By.XPath("(//div[#class='hdtb_mitem']/a)[2]")).Click();
ANother XPath approach would be to search 'by text' as the contained text appears to be the only truly unique identifier (this is generally not ideal, but it appears you don't have control of the HTML in this case).
driver.FindElement(By.XPath("//div[#class='test1']/a[contains(text(), 'Images2')]")).Click();
IWebElement elment = driver.FindElement(By.PartialLinkText("Click"));
element.Click();
http://jsfiddle.net/fresheyeball/5z7bX/
<script type="text/ng-template" id="/newTrack.html">
<h1>New Track </h1>
<p>Hello there</p>
</script>
<div id="overlay" closemodal></div>
<div id="modal"><a id="closeModal" closemodal></a>
<div id="modalContent" ng-include src="/newTrack.html"></div>
</div>
I would expect the following result:
<div id="overlay" closemodal></div>
<div id="modal"><a id="closeModal" closemodal></a>
<div id="modalContent" ng-include src="/newTrack.html">
<h1>New Track </h1>
<p>Hello there</p>
</div>
</div>
But nothing seems to happen. Really I am trying to render the template from inside a custom directive, after tracking it down for a while, it appears I can't get ng-include to working even in its most simple form. What am I missing here?
Under Fiddle Options, add <body ng-app>
src: If the source is a string constant, make sure you wrap it in quotes, e.g.,src="'myPartialTemplate.html'". -- ngInclude docs
So ng-include src="'/newTrack.html'"
Fiddle