Clicking button using inner text - button

I am using puppeteer to click a button that does not have a generic id. I have attached a screenshot of the DOM with an arrow showing the button element. I have tried the following code to no avail:
await page.evaluate(() => {
let btns1 = [...document.querySelector("typeaheadDropdownWrapped-0").querySelectorAll("button")];
btns1.forEach(function (btn) {
if (btn.innerText == "#jubaitca")
btn.click();
});
});
#jubaitca is a known text that can be used to identify the button. Can anyone help?
DOM

I don't see any #jubaitca inside the HTML DOM screenshot. But if it's inside this selector, then maybe this code will work.
Your selector should be like this:
await page.evaluate(() => {
document.querySelectorAll('[role="progressbar"] ~ div > [role="button"]').forEach(elem => {
if (elem.innerText.search('jubaitca') > -1) {
elem.click()
}
})
})

Related

Injecting style into a tested page

I have an issue with the div:
<div id="root-hammerhead-shadow-ui" contenteditable="false" class="root-hammerhead-shadow-ui"></div>
which is injected by testcafe into an iframe that I'd like to test.
The iframe contains an input field and some styles which make the hammerhead div cover the iframe and input completely (width/height set to 100%) so I'm unable to use typeText with it (expect visible passes correctly).
I can fix the issue during debugging by setting the width/height of the hammerhead div to defaults, can I somehow do the same thing in code?
You can use the ClientFunction API to manipulate DOM elements on a client. Please take a look at the following example:
import { Selector, ClientFunction } from 'testcafe';
fixture `New Fixture`
.page `https://example.com`;
test('New Test', async t => {
const changeHammerheadDiv = ClientFunction(() => {
const hammerHeadDiv = document.getElementById('root-hammerhead-shadow-ui');
hammerHeadDiv.style.width = '0';
hammerHeadDiv.style.height = '0';
});
await t.switchToIframe(Selector('iframe'));
await changeHammerheadDiv();
await t.typeText(Selector('body').find('input'), 'qwerty');
});

Why the Jquery Autocomplete is not working if css is present

I am trying to put a autocomplete functionality on a text input , this is working fine if css is not present but if css is present this is not working .
This is my fiddle
and this is my code
var sourcesymbols = ["ONE", "TWO", "THREE"];
jQuery(document).ready(function() {
$("#stock_name").autocomplete({
source: sourcesymbols,
messages: {
noResults: '',
results: function() {}
}
});
});
Could you please let me know how to resolve this .
when you use CSS styling for the text box you will hide the data list (auto complete list data) you can try an alternative as shown in this link - Datalist

show the tooltip only when ellipsis is active

I have the next div:
<div class="div-class" style="width:158px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" title=<%=myDesc%>
How can I show the tooltip only when ellipsis is active?
I find this function
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
But I didn't know how to use it knowing I use jsp and struts
Try something like this:
Working DEMO
Working DEMO - with tooltip
$(function() {
$('div').each(function(i) {
if (isEllipsisActive(this))
//Enable tooltip
else
//Disable tooltip
});
});
function isEllipsisActive(e) {
return (e.offsetWidth < e.scrollWidth);
}
For anyone using qtip (being quite popular).
First, add a class to each of your overflowing elements.
<span class="ellipsis-text">Some very long text that will overflow</span>
Then, use the jQuery selector to select multiple such elements, and apply the qTip plugin (or any other tooltip that comes to mind) on to your elements as such:
$('.ellipsis-text').each(function() {
if (this.offsetWidth < this.scrollWidth) {
$(this).qtip({
content: {
text: $(this).text()
},
position: {
at: 'bottom center',
my: 'top center'
},
style: {
classes: 'qtip-bootstrap', //Any style you want
}
});
}
});

Css needed to highlight common words in a table

I came across this page on slate.com that highlights similar words in a table when you hover over one instance:
http://www.slate.com/blogs/lexicon_valley/2013/09/11/top_swear_words_most_popular_curse_words_on_facebook.html
Does anyone know how this is done?
You can do it with jQuery like this:
$('table td').mouseover(function() {
$('table td').removeClass('highlight')
var text = $(this).text();
$('table td').filter(function() { return $(this).text() == text; }).addClass('highlight');
})
Check this jsFiddle
using jQuery.data
Always to know how something works, the first step is to read the source code
Check this:
EXAMPLE
$('.interactive_table .cell_word')
.hover(function(){
var word = $(this).data('word');
$(this).parent().parent()
.find('.word_'+word)
.addClass('highlighted');
},function(){
var word = $(this).data('word');
$(this).parent().parent()
.find('.word_'+word)
.removeClass('highlighted');
});
$('.interactive_table .cell_rank_number')
.hover(function(){
$(this).parent()
.find('.cell_word')
.addClass('highlighted');
},function(){
$(this).parent()
.find('.cell_word')
.removeClass('highlighted');
});

Twitter-Bootstrap dropdownlist open/close event in angularjs

I'm trying to create a drop down list directive, with down-arrow that appears when the mouse is hovering the dropdown header or when the dropdown list is oppend, and disappears otherways.
I succeeded to do this, but if the dropdown list is closed not by selecting element or by pressing on the header list again, than the arrow isn't disappead.
(I.E. If i'm openning one list and than openning another without closing the first one, than arrow of the first list is not disappearing)
JsFiddle - http://jsfiddle.net/rpg2kill/uS4Bs/
code:
var myApp = angular.module('myApp', ['ui.bootstrap']);
function MyCtrl($scope) {
$scope.supportedList= ['Option1', 'Option2', 'Option3', 'Option4'];
$scope.selectedItem = 'Option1';
}
myApp.directive('dropDown',
function () {
return {
restrict: 'E',
replace: false,
scope: {
supportedList:'=',
selectedItem:'='
},
template:
'<div ng-mouseenter="onMouseEntered()" ng-mouseleave="onMouseLeft()">' +
'<a class="dropdown-toggle" data-toggle="dropdown" href="" ng-click="onMouseClicked()" >' +
'<img ng-style="{\'visibility\': dropDownIconVisibility}" src="http://png.findicons.com/files/icons/2222/gloss_basic/16/arrow_down.png"> </img>' + //Arrow down Icon
'<span>{{selectedItem}}</span>' +
'</a>' +
'<ul class="dropdown-menu">' +
'<li ng-repeat="item in supportedList" ng-click="onSelectedItem(item)">' +
'{{item}}' +
'</li>' +
'</ul>' +
'</div>'
,
link: function(scope, element, attrs) {
scope.dropDownIconVisibility = "hidden";
scope.dropDownIconVisibilityLocked = false;
scope.onSelectedItem = function(item) {
scope.dropDownIconVisibilityLocked = false;
scope.selectedItem = item ;
};
scope.onMouseEntered = function()
{
scope.dropDownIconVisibility = "visible";
};
scope.onMouseLeft = function()
{
if (scope.dropDownIconVisibilityLocked)
return;
scope.dropDownIconVisibility = "hidden";
};
scope.onMouseClicked = function()
{
scope.dropDownIconVisibility = "visible";
scope.dropDownIconVisibilityLocked = !scope.dropDownIconVisibilityLocked;
};
}
};
})
The code is little ugly. A better solution is to show the arrow if the mouse is hovering OR the list is openned, but I don't know how to bind angular to the state of the dropdown list.
Is there a way to binding angular to Twitter bootstrap's dropdown event?
Or is there a better way to solve this problem?
I suggest you using full CSS approach - it takes less code, it does not trigger JS evaluations, thus, it performs better (Angular is a bit slow with all its cool features). Once you go mobile - CSS will be more preferable, as supports downgrading with media queries and so on... There are too many pros!
Remove all your mouse-tracking code and add just two CSS rules and here you go:
a.dropdown-toggle img {
visibility: hidden;
}
a.dropdown-toggle:hover img {
visibility: visible;
}
I succeeded to solve the problem, unfortunately the solution is not so pretty, but at least it works.
I'll try to solve this with only CSS as madhead suggested.
The problem was that I didn't know when the user clicked outside the dropdown, that caused the dropdown popup to close but the icon was still displayed. So I attached an handler to each directive that listen on document.click event and hides the Icon.
document.addEventListener('click', function (event) {
scope.$apply(function () {
scope.hideDropdownIcon();
});
}, false);
That worked, but if I clicked on another Dropdown when the current dropdown was opened, the document.click event was not fired. So I had to create my event and attach it to $window and to call it when any dropdown is opens.
var event = new Event('hideDropDownIcon');
$window.addEventListener('hideDropDownIcon', function (e) {
scope.hideDropdownIcon();
}, false);
You can see it here:
http://jsfiddle.net/rpg2kill/uS4Bs/6/
There must be a better solution. So if you know how to do it better or by using only css, I would like to know.
Thanks.
Found CSS solution to the problem.
css is so simple instead all the js events..
The CSS:
a.dropdown-toggle img {
visibility: hidden;
}
li.ng-scope:hover img,li.ng-scope:active img,.open a img{
visibility: visible;
}
You can check this: http://jsfiddle.net/rpg2kill/HVftB/1/

Resources