We Keep Coding

How can i detect a button in taiko js

I'm trying to detect a button on my simple angular page. On checking that the button exists, it always returns false whilst the text search always return true.
console.log(await button('New Page').exists()); - false
console.log(await button(below('title')).exists()); - true
console.log(await text('New Page').exists()); - true
the html component looks a bit like this.
<button class="new-page-button" routerlink="/next" tabindex="0">
<span class="mat-button-wrapper"> New Page </span>
<div class="mat-button-ripple mat-ripple" matripple=""></div>
<div class="mat-button-focus-overlay"></div>
</button>
I would expect that the button function in taiko would be able to detect the button with text "New Page".
There isn't much help around this topic.
Any help would be much appreciated.

Currently, taiko does not search for buttons which has child elements with matching text. There is an open issue for the same. Please follow https://github.com/getgauge/taiko/pull/833 to get updates on the issue.

As of today, 14-Jan-2020, I am using Gauge # 1.0.6 and able to locate the button with child tag as mentioned in the query, so I hope it is updated with the new request.
This is how my HTML code looks like:
<button _ngcontent-lyu-c3="" class="full-width loginButton mat-raised-
button mat-primary ng-star-inserted" color="primary" mat-raised-button=""
mattooltip="Login with Okta" aria-describedby="cdk-describedby-message-35"
cdk-describedby-host="" style="touch-action: none; user-select: none; -
webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
<span class="mat-button-wrapper"> Login with Organization </span><div
class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-
button-focus-overlay"></div></button>
This is my step:
* Login page should have "Login with Organization" button
And I can able to identify in my step implementation like this:step("Login page should have <arg0> button", async function(arg0) {
await button(arg0).exists();
});

Skip hidden tab indexes

I have the following html:
<span tabindex="19">
</span>
<span tabindex="20">
</span>
<span tabindex="21">
</span>
<span id="hidden" tabindex="22">
</span>
<span tabindex="23">
</span>
<span tabindex="24">
</span>
As you can see one of the span is hidden, the code to hide it is
#hidden
{
display: none;
}
I want a behavior where tab skips the hidden indexes. So i want something like this when i click tab:-
go to 19,20,21,23,24
I have no way of controlling the tab indexes as they are coming hard coded in the html i process.

Thank you guys!!
I tried a lot of things, so i was wrong in hiding it using
#hidden
{
display : none.
}
I tried
#hidden
{visibility : hidden }
and tab skips the links which are marked as hidden.

You could give it a negative tabindex which is supposed to be ignored by the browser. There are jQuery plugins that do this as well, such as SkipOnTab https://github.com/joelpurra/skipontab.
var $hidden = $('#hidden');
$hidden.attr('tabindex', '-' + $hidden.attr('tabindex'));

It would help if you posted your code, but you could try something like this:
$("#hidden").attr("disabled","disabled");

Normally the tab-event automatic skips a non visible HTML-element. However, the hard coded HTML part can override with JavaScript after the page has been loaded:
<script>
window.addEventListener("load", function()
{
document.getElementById("hidden").setAttribute("tabindex", "-1");
});
</script>
JQuery is also a solution, but 90kByte is a little bit heavy for this simply task.

retrieve background image from css using javascript without using it's ID

I've looked around and it's been hard to find a thread that does what I want it to do. As far as I am concerned, I don't even know if it's possible. What I am looking to do is to retrieve the background image file name (especially if it is a link) when it is click. I have a script that logs all click but the last piece I need is the background-image name (file-path with name would even do) stored in the CSS file. Anyone have an idea or a solution as to how this can be done without using a div or class? Here's what I have right now:
JavaScript & HTML
<script type="text/javascript">
var arrayWithElements = new Array(); //,replaytimer;
document.onclick = clickListener;
function clickListener(e)
{
var clickedElement=(window.event)
? window.event.srcElement
: e.target,
tags=document.getElementsByTagName(clickedElement.tagName);
for(var i=0;i<tags.length;++i)
{
if(tags[i]==clickedElement)
{
if(clickedElement.tagName=="A")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.href,clickedElement.innerText,document.location.href,document.images.href);
}
if(clickedElement.tagName=="IMG")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
}
if(clickedElement.tagName=="DIV")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
}
if(clickedElement.tagName=="CLASS")
{
arrayWithElements.push({tag:clickedElement.tagName,index:i});
console.log(clickedElement.baseURI,clickedElement.parentNode.href,clickedElement.innerText,document.location.href,document.getElementsById(element).src);
}
}
}
}
</script>
</head>
<a id="1" href="#">trial1</a>
<a id="2" href="http://www.google.com" target="blank">google</a>
<a id="3" href="http://www.google.com">google</a>
<a id="4" href="http://www.google.com" target="_blank"><img id="image" src="untitled.jpg"/></a>
<a id="5" href="trial.html">
<input type="text" id="text-test"/>
<div id="image-link"></div>
CSS:
#image-link {
background-image:url('untitled.jpg');
width: 50px;
height:50px;
border: 1px solid #000000;
}
This is a test file that will be converted for use in the near future. Thanks

On newer browsers, you can use window.getComputedStyle(clickedElement) to find the background image property.

As per your code, just the filename or the path using JQuery in all browsers:
var withId = $("#image-link").css("background-image").split('(')[1].split(')'),
withoutId = $("img").attr("src");
// with id and css file
console.log(withId[0]);
// without id and inline style
console.log(withoutId);

Yes, as Alnitak says, use getComputedStyle, but for compatibility with more browsers check out this other question:
Get element CSS property (width/height) value as it was set (in percent/em/px/etc)
Note: I would love to be able to comment on another user's good answer instead of posting my own that is pretty much the same but with a little additional info. Unfortunately, I cannot because stackoverflow doesn't permit this for a user with less than 50 rep. So I have to post it like this instead.

Controlling the preventDefault to select which default to prevent

In a page I'm working on I have this HTML (simplified version; the original is a bit more complex).
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ></span>
<span class="type">numeric</span>
</a>
Then I have a system that allows an "edit mode".
That edit to mode changes that HTML to this:
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ><input name="aName" type="text"></span><img src="ok.png"><img src="x.png"></span>
<span class="type">numeric</span>
</a>
The issue is as follows:
When the user clicks the input how can I have the carret where the user clicked without anything else happening?
For that I tried this:
If I use the preventDefault(), the user is not sent to the link but the carret is also not positioned where the user clicked.
If I use stopPropagation(), nothing is prevented, the link is clicked.
If I use both, same as preventDefault() happens.
One possible solution I thought is to get rid of the <a> and replace it with a different tag, like a <span> tag. I just would prefer not to have to do that due to how this system works. If you think that there's a nice alternative, then please state it.
No examples or answers with libraries please
Edit: My relevant js code, as requested:
this.editableElement = document.createElement('input');
this.editableElement.type = "text";
this.editableElement.onclick = function (e){
e.preventDefault();
e.stopPropagation();
}.bind(this);
this.editableElement.name = this.parent.getAttribute('name');
this.editableElement.value = this.currentText;
Edit2: jsfiddle as requested.
http://jsfiddle.net/brunoais/gZU8C/
Now try to place the caret where you clicked. You'll check that the input becomes selected, the link is not followed but the caret is not placed where you clicked.

Is there a way to get a <button> element to link to a location without wrapping it in an <a href ... tag?

Just wondering if there is a way to get a HTML <button> element to link to a location without wrapping it in an <a href... tag?
Button currently looks like:
<button>Visit Page Now</button>
What I would prefer not to have:
<button>Visit Page Now</button>
The button is not being used within a form so <input type="button"> is not an option. I am just curious to see if there is a way to link this particular element without needing to wrap it in an <a href tag.
Looking forward to hearing some options/opinions.

Inline Javascript:
<button onclick="window.location='http://www.example.com';">Visit Page Now</button>
Defining a function in Javascript:
<script>
function visitPage(){
window.location='http://www.example.com';
}
</script>
<button onclick="visitPage();">Visit Page Now</button>
or in Jquery
<button id="some_id">Visit Page Now</button>
$('#some_id').click(function() {
window.location='http://www.example.com';
});

Here's a solution which will work even when JavaScript is disabled:
<form action="login.html">
<button type="submit">Login</button>
</form>
The trick is to surround the button with its own <form> tag.
I personally prefer the <button> tag, but you can do it with <input> as well:
<form action="login.html">
<input type="submit" value="Login"/>
</form>

Just do this
<button OnClick=" location.href='link.html' ">Visit Page Now</button>
Although, it's been a while since I've touched JavaScript - maybe location.href is outdated? Anyways, that's how I would do it.

LINKS ARE TRICKY
Consider the tricks that <a href> knows by default but javascript linking won't do for you. On a decent website, anything that wants to behave as a link should implement these features one way or another. Namely:
Ctrl+Click: opens link in new tabYou can simulate this by using a window.open() with no position/size argument
Shift+Click: opens link in new windowYou can simulate this by window.open() with size and/or position specified
Alt+Click: download targetPeople rarely use this one, but if you insist to simulate it, you'll need to write a special script on server side that responds with the proper download headers.
EASY WAY OUT
Now if you don't want to simulate all that behaviour, I suggest to use <a href> and style it like a button, since the button itself is roughly a shape and a hover effect. I think if it's not semantically important to only have "the button and nothing else", <a href> is the way of the samurai. And if you worry about semantics and readability, you can also replace the button element when your document is ready(). It's clear and safe.

Well, for a link, there must be a link tag around. what you can also do is that make a css class for the button and assign that class to the link tag. like,
#btn {
background: url(https://image.flaticon.com/icons/png/128/149/149668.png) no-repeat 0 0;
display: block;
width: 128px;
height: 128px;
border: none;
outline: none;
}

You can make it a non-submitting button (<button type="button">) and hook something like window.location = 'http://where.you.want/to/go' into its onclick handler. This does not work without javascript enabled though.
Or you can make it a submit button, and do a redirect on the server, although this obviously requires some kind of server-side logic, but the upside is that is doesn't require javascript.
(actually, forget the second solution - if you can't use a form, the submit button is out)

<form action="portfolio.html">
<button type="link" class="btn btn-primary btn-lg">View Work</button>
</form>
I just figured this out, and it links perfectly to another page without having my default link settings over ride my button classes! :)

Here it is using jQuery. See it in action at http://jsfiddle.net/sQnSZ/
<button id="x">test</button>
$('#x').click(function(){
location.href='http://cnn.com'
})

Assuming that in your HTML file you've a button with id="Button", In the script.js(your script file), you can use this way:
document.getElementById("Button").addEventListener("click", gotoUrl);
function gotoUrl() {
window.location.assign("https://www.google.com/");
}
Now the button will lead you to Google!
For more info: https://www.w3schools.com/js/js_window_location.asp

You can also try this<button type=“Submit”><a href=“”>#</a></button>