How to get ::before element of DOM via CSS (CSS3)? - css

I'm trying to get the element and set some styles to it, but it's my first time and I can't achieve it. I also can't set id or class to the element, because it's dynamically generated. I'm searching for the easiest solution and believe, that you guys will help me with this simple question.
Here is my HTML:
<md-list class="no-paddings" flex="100">
<md-list-item flex="100" ng-repeat="adGroup in adsGroupsAndKeywords track by $index">
<md-menu>
<div layout="row" layout-align="space-between center">
<div ng-click="AdsGroupsCtrl.openMenu($mdOpenMenu, $event)">
<h6>
{{ adGroup.name }}
</h6>
<md-chips
ng-click="call($event)"
md-on-remove="AdsGroupsCtrl.removeKeywordFromGroupOfAds($chip);"
ng-model="adGroup.keywords"
readonly="true"
md-removable="true">
<md-chip-template>
<em>{{$chip.keyword}}</em>
</md-chip-template>
</md-chips>
<md-divider></md-divider>
</div>
</div>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="AdsGroupsCtrl.addToCurrentGroup($index)">
Добавить в данную группу
</md-button>
</md-menu-item>
<md-menu-item>
<md-button
ui-sref="app.expansionOfSemantics.adsList(
{
campaignsId: capmpaignId,
adId: adsGroupsAndKeywords[$index].id,
regionIds: adsGroupsAndKeywords[$index].regionIds,
keywords: keywords
})">
Сознать новую группу на основе текущей
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
Thanks in advance

From your code I am not certain which your pseudo-element is. But in general you select pseudo-elements with ::before and ::after.
The pseudo-elements are created by the content-property, the ::before and ::after pseudo-selectors as the name implies just select the location.
::before{...} or ::after{...}
(select all pseudo elements on the website that are located as first or last child inside their parent element respectively)
.className::before{...}
(selects the pseudo-element that is located as first child inside the element with the class="className")
.className::before{content: '';}
(::before selects the first spot inside the element with the class="className" but its the content-property that creates the pseuod-element)

Related

webdriver select first sibling based on nth sibling condition

i'm writing a test case in a grid based software
I'm mostly using css selectors to select elements and perform clicking
based on the image - I'm selecting the right circled element (base don a css class that displays the blue dot ), now, based on this condition, I want to select the first sibling element - which is a "plus", basically that would open the sub grid further and allow me to run further testing
I can't seem to be able to do that -
assuming that I'm using the following sample html
<div class="td">
<a class="opener">
....
</a>
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
...
</div>
<div class="td">
<a class="round-solid">
...
</a>
</div>
I can select "round-solid" - based on this, how do I select "opener" element ?
I only want the opener element for which a specific column contains the "round-solid" class
That should do the trick:
driver.findElement(By.xpath("//a[#class='round-solid']/../preceding-sibling::div/a[#class='opener']"));

sidebar layout in ember-paper not working

I'm trying to use ember-paper in my ember app but i can't float content to the right.
Example
What I want to achieve (from ember-paper official website)
My code
application.hbs
{{#paper-nav-container}}
{{#paper-sidenav class="md-sidenav-left site-sidenav md-whiteframe-z2" locked-open="gt-sm"}}
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<div class="logo">
<strong>Paper</strong>
</div>
</div>
{{/paper-toolbar}}
{{#paper-content}}
{{#paper-list}}
{{#paper-item action=(transition-to "employees.list")}}Introduction{{/paper-item}}
{{#paper-item action=(transition-to "index")}}Another link{{/paper-item}}
{{/paper-list}}
{{/paper-content}}
{{/paper-sidenav}}
<div layout="column" tabindex="-1" role="main" flex>
{{#paper-toolbar}}
<div class="md-toolbar-tools">
<span class="md-breadcrumb-page">Title</span>
</div>
{{/paper-toolbar}}
{{#paper-content class="md-padding"}}
{{outlet}}
{{/paper-content}}
</div>
{{/paper-nav-container}}
How can I float sidebar to the left? I have no errors in console, and it was a straight copy-paste from official guide
The example is using the display:flex probably thats not supported in your browser http://caniuse.com/#search=flex ? provided you copy pasted the entire CSS required.

Copy text from a draggable angular-dnd-list div

I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}

Need xpath to locate 2 buttons with almost same properties for using in Selenium automation script

Both these buttons have almost similar ID (the number on the ID may change and so is not reliable)
Both have same classes
They both reside under the same parent
Except for the span nothing is different
All the UI elements of the application I am trying to locate and build events on Using Selenium are similar to the below piece...
Can anyone please suggest how I can locate these buttons preferable with xpath?
<div id="button-1749" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar- small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon x-item-disabled x-disabled x-btn-disabled x-btn-default-toolbar-small-disabled" style="margin: 0pt; left: 1563px; top: 0px;">
<em id="button-1749-btnWrap" class="">
<button id="button-1749-btnEl" class="x-btn-center" autocomplete="off" role="button" hidefocus="true" type="button" aria-disabled="true" disabled="">
<span id="button-1749-btnInnerEl" class="x-btn-inner" style="">Delete Selected</span>
<span id="button-1749-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
<div id="button-1750" class="x-btn x-box-item x-toolbar-item x-btn-default-toolbar-small x-noicon x-btn-noicon x-btn-default-toolbar-small-noicon" style="margin: 0pt; left: 1654px; top: 0px;">
<em id="button-1750-btnWrap" class="">
<button id="button-1750-btnEl" class="x-btn-center" autocomplete="off" role="button" tabindex="1" hidefocus="true" type="button">
<span id="button-1750-btnInnerEl" class="x-btn-inner" style="">New Title</span>
<span id="button-1750-btnIconEl" class="x-btn-icon x-hide-display"> </span>
</button>
</em>
</div>
If you want to look for the elements under a specific div, you can use descendent axis.
Example:
//div[#id='your div']/descendant::button[contains(#class, 'x-btn-center')]/span[text()='Delete Selected']"
This will give you Deleted Selected button that is within the div with id 'your div'.
You could also use GetElements (opposed to GetElement) and this will return a List of elements that match your search criteria. Then, providing the order the buttons appear on the page never changes, you may use this List to access the button you want every time by using the associated index.
Eg.
ReadOnlyCollection<IWebElement> buttons = driver.FindElements(By.XPath("YOUR XPATH HERE"));
//If it's the 3rd button that matches your criteria
buttons[2].Click(); //or whatever you want with this button :)
I think this should work in your case:
locator = driver.find_element_by_xpath("//div/em/button/span[contains(text(),'Delete Selected')]")
You can do similar way in case of another element.
though xpath is a desired locator per your question, there are documented speed differences between xpath and css selector, here's one example: http://saucelabs.com/blog/index.php/2011/05/why-css-locators-are-the-way-to-go-vs-xpath/. to locate those elements via css selector, use the following, python example
els = driver.find_elements_by_css_selector("button[id^=button]
for eachel in els:
eachel.click()
You have to create your own xpath if the xpath of 2 elements are same
driver.findElement(By.xpath("//span[contains(text),'New Title')]")).click;

Selenium: how to define css if webpage has mutiple elements with same name

I have the following HTML code:
<table id="userPlaylistTable" cellspacing="0" cellpadding="0">
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 1 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 2 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
<div class="numCellWrapper">
<div class="listArrow up" onclick="moveRowUp($(this))"></div>
<div class="numCell"> 3 </div>
<div class="listArrow down" onclick="moveRowDown($(this))"></div>
</div>
Basically, now if I define my css as:
css=table#userPlaylistTable div[class='listArrow up']
It picks the first such element it finds. But, how would I have to define my css, so that it picks second element of this type?
So, basically how would I define my css to pick a particular element, if multiple elements of the same kind exist on the page?
Could someone please help me with this query?
Thanks.
You need to do something like:
css=table#userPlaylistTable>div[class='listArrow up']:nth(1)
css=table#userPlaylistTable>div[class='listArrow up']:nth(2)
This will give you the 2nd and the 3rd instance
add [1] which is the index into the array. usually 0 based, so [1] is the second element
css: #userPlaylistTable .listArrow.up:nth-of-type[2]
Instead of [2] replace with item you want to select
Description:
id is # -- #userPlaylistTable
class by . listArrow up, but we have space between class name so replace space with . -- .listArrow.up
:nth-of-type(n) will select child

Resources