We Keep Coding

How to make a JS Slider work on Karate DSL UI [duplicate]

Firstly, Karate UI automation is really awesome tool. I am kind of enjoying it while writing the UI tests using Karate. I ran into a situation where in, i was trying to fetch the shadowRoot elements. I read few similar posts related to javascript executor with karate and learnt that it is already answered. it is recommended to use driver.eval. But in Karate 0.9.5 there is no eval, it has script() or scriptAll(). I have gone through documentation couple of times to figure out how i can fetch element inside an element but no luck.
Using traditional selenium+java, we can fetch shadowRoot like this way:
something like shadowRoot which sits inside a parent element like div or body.
//downloads-manager is the tagname and under that downloads-manager, a shadowRoot element exists
The HTML looks like this. it is from chrome://downloads.
<downloads-manager>
#shadow-root(open)
</download-manager>
WebElement downloadManager =driver.findElement(By.tagName("downloads-manager");
WebElement shadowRoot= (WebElement)((JavaScriptExecutor)driver)
.executeScript("return arguments[0].shadowRoot",downloadManager);
So i tried the following in Karate UI
script("downloads-manager","return _.shadowRoot"); //js injection error
script('downloads-manager', "function(e){ return e.shadowRoot;}"); // same injection error as mentioned above.
def shadowRoot = locate("downloads-manager").script("function(e){return e.shadowRoot};"); //returns an empty string.
I bet there is a way to get this shadowRoot element using Karate UI but i am kind of running out of options and not able to figure out this.
Can someone please look into this & help me?
-San

Can you switch to XPath and see if that helps:
* def temp = script('//downloads-manager', '_.innerHTML')
Else please submit a sample in this format so we can debug: https://github.com/intuit/karate/tree/develop/examples/ui-test
EDIT: after you posted the link to that hangouts example in the comments, I figured out the JS that would work:
* driver 'http://html5-demos.appspot.com/hangouts'
* waitFor('#hangouts')
* def heading = script('hangout-module', "_.shadowRoot.querySelector('h1').textContent")
* match heading == 'Paul Irish'
It took some trial and error and fiddling with the DevTools console to figure this out. So the good news is that it is possible, you can use any JS you need, and you do need to know which HTML element to call .shadowRoot on.
EDIT: for other examples of JS in Karate: https://stackoverflow.com/a/60800181/143475

How to initialize Tooltips in Bootstrap 4 with pure JavaScript? No jQuery

I'm somehow stuck with this code:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
I'd like to change it to pure JavaScript. I'm not sure how to call the tooltip function, I already have some ideas like:
var tooltips = document.querySelectorAll("[data-toggle='tooltip']");
for(var i = 0; i < tooltips.length; i++){
//this gives an error
tooltips[i].tooltip();
}
I'm able to get all the tooltips, but I cannot initialize them. If I write something like this:
$(tooltips[i]).tooltip();
Then it works, but I want to remove the jQuery dependency since this is the only jQuery section that I have. Any idea? I've been searching and I cannot find anything useful.

For the new Bootstrap 5, this will be the new option without jQuery:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
More info: https://getbootstrap.com/docs/5.0/components/tooltips/
Note:
In Bootstrap 4, you cannot initialize the Tooltips without jQuery. Here is an example:
https://jsfiddle.net/30c6kmnL/
There is a dependency on the function/class Tooltip that cannot be called (from my knowledge) without jQuery (you might need to rewrite the entire Tooltip function/class). I got errors like this one:
Uncaught TypeError: bootstrap.Tooltip is not a constructor
If you know how to fix it, please do it on the Snippet and share your results.

Thought I'd throw an answer out there using JS that also targets Bootstrap 4.x. The below code snippet will initialize all tooltips on the page in Bootstrap 4.x.
If you're unfamiliar with JavaScript classes and constructors then you may have trouble catching why the initialization didn't work in the original question.
Classes & Constructors: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
Bootstrap 4.x —requires— JQuery (v3.2.1 slim at minimum) and the Tooltips component specifically require another library, Popper.js (v1.12.3 at minimum). However, the initialization can be written with simple JS (to call the JQuery based constructor for tooltips).
Note: the keyword new is missing from the OP's original question, this is needed to instantiate a new class instance for each element.
function setTooltips() {
let tooltips = document.querySelectorAll('[data-toggle="tooltip"]');
for(let i = 0; i < tooltips.length; i++) {
let tooltip = new bootstrap.Tooltip(tooltips[i]);
}
}
You could also use the mapping method shown by BS5 as it would still be calling the JQuery based constructor. As long as JQuery and Popper are present beforehand.
Also you don't necessarily need to save the instance into memory if you don't need to reference it later, just return it instead.
Preferably call this in a DOMContentLoaded event globally to target any tooltips on any page.
window.addEventListener('DOMContentLoaded', function() {
setTooltips();
}, false);
Bootstrap 5 does things differently, mainly dropping JQuery as a dependency in favor of more modern ES6 JS. Use Federico's answer for Bootstrap 5.x and up, which is the default example from the BS5 docs for initializing tooltips.
Bootstrap 5 is designed to be used without JQuery, but it's still
possible to use our components with JQuery. If Bootstrap detects
jQuery in the window object it will add all of our components in
jQuery’s plugin system...
See: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

JavaScript - referencing a function (method) in a different class in ES6

I am hoping my explanation provides enough information and that the answer is simple. This is for a project I have started recently and first exposure to JavaScript ES6 syntax.
We use RequireJS, and each page has two primary pages required: reports/pages/common and reports/pages/settings_page I believe these pages are analogous somewhat to controllers in Angular (which I have a little experience with).
The code is transpiled by gulp.
My question is, how do I call (from a method inside class SettingsPage) a method in an instance of the class CommonPage class? I do not know what the name of the CommonPage instance is but here is the script at the bottom, just before the </html> tag:
$(document).ready(function() {
// always loading bootstrap to enable data attributes to work
// only loading bootstrap once, see comment above.
require(['bootstrap', 'babelPolyfill', 'reports/pages/common', 'reports/pages/settings_page'], function(bootstrap, babelPolyfill, common, page) {
if ((window.fin) && (window.fin.pageInitArguments)) {
page.init(window.fin.pageInitArguments);
} else {
page.init();
}
common.init();
});
});

My question is, how do a reference (from a function inside class SettingsPage) a function in the class CommonPage?
It would be clearer if you used the term "method" instead of "function" here. I also presume when you say "reference a function in the class", you actually mean "call a method in the class on an instance of that class".
Well, an instance of a class is just a regular old object with methods sitting on its prototype. You call a method on such an object in the same way you have for years, by saying
object.method()

dojo.declare: unknown base class - dojo.Stateful

So I'm learning Dojo and seeing what I can do with it - I do apologise if this is a stupid question but I can't find a solution.
My code:
dojo.require("dojo.Stateful");
dojo.declare('W.Model',dojo.Stateful,{
foo:'bar'
});
The error:
Uncaught Error: declare W.Model: unknown base class. Did you use dojo.require to pull it in?
I did use dojo.require to pull it in. What am I missing?
Edit - console.log(dojo.Stateful); returns undefined. I am using Google to hot Dojo for me - here: <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>
Other classes are loading fine, just dojo.Stateful is a problem.

Do you have the full class declaration in a separate file? Or is this all inline on a page?
If you are doing it inline, wrapping the class until the page has loaded will fix the problem:
dojo.require("dojo.Stateful");
dojo.ready(function() {
var x = new dojo.Stateful();
console.log(x);
dojo.declare('some.class', dojo.Stateful, {
'x':'y'
});
});

yui3 widget error "this.constructor.NAME is undefined"

I am creating a yui3 widget and I keep getting this error: this.constructor.NAME is undefined.
I am defining a name in my widget:
YUI().add('paginator', function(Y) {
function Paginate(config) {
Paginate.superclass.constructor.apply(this, arguments);
}
Paginate.NAME = "paginate";
...
So, I am not sure what's going on.
Edit:
I also wanted to add that I have just tried to add the default widget skeleton from here and I am still getting the same error.

I thought I would answer this myself in case anyone else comes across this problem. I forgot the new keyword when creating my widget.