Develop Reference

Styling a specific data-title-original

I have a range of tooltips that were set up using PHP so that you can upload an image and then customise the tooltip information as you please.
All the tooltips are one size, but I'd like to set a specific size for one specific tooltip. I can't add a class to it because all the tooltips are set up using a PHP script.
I tried this css but it's not working:
a[data-original-title="SABS APPROVED"] .tooltips button {width: 60px !important;}
Is there some jquery that can help me achieve this?
Here's the HTML:
<div class="row tooltips-content">
<a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="SABS APPROVED">
</a>
<div class="symbols">
<span class="tooltips " style="" title=""><button style="background-
image:url(http://javlin.unknowndesign.co.za/wp-
content/uploads/2017/06/SABS_APPROVED.svg);"></button></span>
</div>

Your CSS
a[data-original-title="SABS APPROVED"] .tooltips button {width: 60px !important;}
looks ok, maybe there is wrong select rule? For example, no need in space before .tooltips...
You also can add class via javascript (don't forget do it when document ready)
$('a[data-original-title="SABS APPROVED"]').addClass("my_special_tooltip");

First, there is no data-original-title attribute in the HTML, second, there is no tooltips class in the HTML.
Let's assume this HTML structure:
<div class="row tooltips-content">
<a href="#" class="tooltips" data-toggle="tooltip" data-placement="top" title="SABS APPROVED">
<button>Button</button>
</a>
</div>
CSS
You do must remove the space before .tooltips to select all the elements that have this class and the specified attribute:
a[data-original-title="SABS APPROVED"].tooltips button {width: 60px !important;}

Why this text input doesn't work on iOS?

I have a bootstrap dropdown menu combined with a text input field that acts as an Angular filter. The code looks like this:
<form name="searchForm" role="form" data-ng-submit="goSearch()">
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<div class="dropdown">
<input type="text" ng-click="load_origins()" name="dropdown-toggle" data-ng-model=origin_search placeholder="Ciudad Origen" class="btn btn-default search-menu-button dropdown-toggle" id="origin" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" required autocomplete="off">
<ul class="dropdown-menu dropdown-menu-right search-menu-items" aria-labelledby="origin">
<li><a href class= "search-menu-item" data-ng-repeat="origin in origins | filter:origin_search" data-ng-click="checkDestinations(origin)">{{origin.Localidad}}</a></li>
</ul>
</div>
</div>
</div>
</div>
</form>
The thing is that:
<input type="text" ng-click="load_origins()" name="dropdown-toggle" data-ng-model=origin_search placeholder="Ciudad Origen" class="btn btn-default search-menu-button dropdown-toggle" id="origin" data-toggle="dropdown" aria-haspopup="false" aria-expanded="false" required autocomplete="off">
is not working as intented in iOS, the keyboard appears but no text appears when the user tries to write.
For what I've been searching it can be related with a bug in iOS with that particular input type, but there was no solution that worked for my case.
Is it maybe a CSS related thing? (Maybe a Bootstrap bug: http://getbootstrap.com/browser-bugs/)
Or could it be re an Angular thing? Or maybe just an iOS problem?
Any help will be appreciated.
Thanks in advance.

Finally I opted to use a Typeahead of UI-Bootstrap mostly because it seemed a good option as it behaved the same way that the dropdown that I tried to implement, but without the troubles on iOS.
So, I didn't find out what was causing the problems, after some frustration it was a better option to change the directive.

How to handle Angularjs / Javascript dropdown using Python / Selenium webdriver?

i want to automate some browser tasks using Python and Selenium webdriver on Chromium browser. My python script is already able to login, navigate to a subpage / do some clicks, and insert something into a form.
My problem is a mandatory dropdown list where i have to choose something before i can go on. I think the webpage contains angularjs / javascript at that point (third line in the code below) to create the dropdown, and i don't know how to handle that.
Problem seem to be 1) to locate the element (xpath seems to change sometimes), and 2) i'm unable to click or send keys to what i've found. Also i've tried some kinds of "WebDriverWait" and sleep commands and "wait.until(expected_conditions.visibility_of_element_located((By.XPATH, ...))"... no luck so far.
Is it at all possible to solve that problem with just Python and Selenium?
Or do i need something like Protractor (and does Protractor just works with Javascript commands)? Also i've seen Pytractor...
I'm quite a Newbie concerning that stuff, could someone please explain what could be a good way to solve this problem? Thanks in advance... :)
Webpage code looks like this (grabbed using Firebug/Firepath):
<div class="ng-scope ng-isolate-scope" model-contains-key="true" ref="salutations" cat-input-select="editDetail.salutation">
<div id="s2id_autogen1" class="select2-container form-control ng-untouched ng-valid ng-dirty ng-valid-parse">
<a class="select2-choice select2-default" tabindex="-1" href="javascript:void(0)">
<span id="select2-chosen-2" class="select2-chosen"/>
<abbr class="select2-search-choice-close"/>
<span class="select2-arrow" role="presentation">
<b role="presentation"/>
</span>
</a>
<label class="select2-offscreen" for="s2id_autogen2"/>
<input id="s2id_autogen2" class="select2-focusser select2-offscreen" type="text" role="button" aria-haspopup="true" aria-labelledby="select2-chosen-2"/>
<div class="select2-drop select2-display-none select2-with-searchbox">
<div class="select2-search">
<label class="select2-offscreen" for="s2id_autogen2_search"/>
<input id="s2id_autogen2_search" class="select2-input" type="text" aria-autocomplete="list" aria-expanded="true" role="combobox" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" aria-owns="select2-results-2" placeholder=""/>
</div>
<ul id="select2-results-2" class="select2-results" role="listbox"/>
</div>
</div>
<select class="form-control ng-untouched ng-valid ng-dirty ng-valid-parse" ng-change="modelChanged(); changeCallback({value: selectValue.value})" ng-readonly="readonly" ng-disabled="disabled" ng-model="selectValue.value" ui-select2="{dropdownAutoWidth: 'true', allowClear: 'false'}" tabindex="-1" title="" style="display: none;">
<option value=""/>
<!-- ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Mr" value="Mr" ng-repeat="option in options">Mr</option>
<!-- end ngRepeat: option in options -->
<option class="ng-binding ng-scope ng-isolate-scope" cat-i18n="xxxxxxx.salutation.Ms" value="Ms" ng-repeat="option in options">Ms</option>
<!-- end ngRepeat: option in options -->
</select>
<!-- ngIf: infoText -->
</div>

In order to automate any webpage developed in Angular JS, we have to use an opensource tool "Protractor". Selenium itself won't be supporting the Angular JS web applications automation. For more information on Protractor, please refer to the below article
Testing Angular JS application using Protractor
The protractor also uses the same commands which selenium uses.
Hope this helps.

Kendo UI DatePicker, removing input styles

I am using a Kendo UI DatePicker control in our application, I would like to remove the styles applied to the input that triggers the datepicker to show.
When I initialize my datepicker like this:
$('.datepicker').kendoDatePicker();
The .datepicker element which is an input type='text' is wrapped by some elements so that the small calendar icon will appear.
<span class="k-widget k-datepicker k-header form__field box__filterlight__field datepicker">
<span class="k-picker-wrap k-state-default">
<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">
<span unselectable="on" class="k-select" role="button">
<span unselectable="on" class="k-icon k-i-calendar">select</span>
</span>
</span>
</span>
But I would like to have full control on it and just have the styles for the calendar. Ideally disable the wrapping Kendo UI does so the markup would stay like:
<input placeholder="from" class="form__field box__filterlight__field datepicker k-input" data-role="datepicker" type="text" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="8beab73f-332b-45a7-8f0b-4a6c3faafcd6_cell_selected">
Is there a way to do that? I looked at the documentation and it does not seem to have a way to disable the wrapping.

What you could do us use jQuery, Javascript or other library to target the inner elements and just hide them from the DOM or remove them from the DOM on document ready or window load.
I would wrap your date picker control in a DIV, give that and ID and then using jQuery, target all the sub items and remove them from the DOM.
You can do 2 things, you can remove the icon elements and you can use the jQuery .unwrap() method to unwrap or remove the parent element.
I made a JSFiddle that might get you started. You can look at the output frame's elements in the browser element inspector to see the elements being removed.
https://jsfiddle.net/Ls6xv9yw/
$(function(){
$('#myCalendar').find('.k-select').remove(); //Will remove the k-select element containing the icon.
$('#myCalendar').find('.datepicker').unwrap();//Unwrap .datepicker input from it's immediate parent if you want this.
});
There might be unintended circumstances by removing these because of the way the datepicker works, but this should work, or at least get you a path to work with.

What could make text on dojo input/select on top of everything?

I have a css rendered menu (ul li...etc), what beneath is a stack of dijit component rendered by dojo. The problem is showing in the image below, which only happens on IE7, but works fine on IE8/9, firefox and chrome.
The layout of the dijit components(border, style) are all under the menu, but only user entered text is on TOP OF EVERYTHING.
I heard about window object is always on top of every windowless components, that would may sense that the is on top of ui..li menu, however, for testing purpose I create a plain object and its text is under the menu! I am very confused now.
Here are the codes for dijitTextInput and plain text input:
Dijit text input:
<div id="widget__personName_id" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitValidationTextBox" role="presentation" widgetid="_personName_id">
<div class="dijitReset dijitValidationContainer">
<input class="dijitReset dijitInputField dijitValidationIcon dijitValidationInner" type="text" role="presentation" readonly="readonly" tabindex="-1" value="Χ">
</div>
<div class="dijitReset dijitInputField dijitInputContainer">
<input id="_personName_id" class="dijitReset dijitInputInner" type="text" name="personName" autocomplete="off" dojoattachpoint="textbox,focusNode" maxlength="255" tabindex="0" aria-required="false" aria-invalid="false" value="">
</div>
</div>
Here is the plain input
<input name="personName" size="50">
So could anyone give a hint, about where can I start to find a clue to make text on dijit input box under the menu?

Here is the hint as requested:
This is the matter of z-index in css codes.
Higher the z-index means that it is above those who have lower z-index value.
Z-index must exist with 'position' value (position absolute or relative)