testcafé: An error occurred when trying to calculate a custom Selector property - testcafe

I'm using Testcafe and I have pretty straightforward selector:
const tile = Selector('[data-component="tile"]');
And that selector is used to create this:
const titleFieldTile = tile.nth(0);
const titleFieldName = titleFieldTile.find(
'[data-testid="tile-content"] [data-testid="ps-field-form-name"]'
);
This is defined outside of the test, and in the test this line causes the test to fail:
await t
.expect(titleFieldType.textContent)
.eql('text')
Giving this error:
1) An error occurred when trying to calculate a custom Selector property "header":
ReferenceError: _ref is not defined
Browser: Chrome 90.0.4430.93 / macOS 10.15.7
...
58 | await t
59 | // .expect(titleFieldType.textContent)
60 | // .eql('text')
61 | .expect(titleFieldName.textContent)
> 62 | .eql('TITLE')
If I console.log the titleFieldName that works, it is the camparison that is causing problems, but I can't figure out why.
I have no custom DOM or methods added to the selector, so I'm not sure where the error is coming from.
Just to be clear, I've created these types of Selectors a lot, and never had a problem.
I've narrowed it down a bit. The .textContent is causing the problem.

I managed to work around this doing this:
await t
.expect(titleFieldType.withText('text').exists)
.ok()
.expect(titleFieldName.withText('TITLE').exists)
.ok()
Basically filtered for the text (can be a regular expression) and then checked if anything actually matched.
It does what I need.

Related

Testcafe: How to grab the text not from html code (selector) but in field on UI

I need to extract parts of string from the text which was written in the field (input) on UI (This text is not in HTML code).
I am trying sth like this (but it does not work).
const textInput = await model.inputtTittle.textContent;
console.log(textInput)
Nothing return probably textContent take text from the selector, I was trying with .innerText but it also returned nothing.
And then I would like to write sth like this:
if (textInput.length > 32)
await t.typeText(model.inputTittle, textInput.substr(0, 30));
I hope that it will be work if I have the content of the field inputTittle.
Additional question:
This answer is hidden. This answer was deleted via review 16 hours ago by Jason Aller, Mark Rotteveel, Nico Haase, Botje.
This code works:
const textTittle = await model.inputTittle.value;
const textlength = textTittle.length
if (textlength>32)
{
console.log(textTittle.substr(0,30));
}
why i can not to writte shorter:
if (await model.inputTittle.value.length >32)
{ console.log(await model.inputTittle.value.substr(0,30));}
You can obtain the entire DOM Node Snapshot with all properties in one object to check what properties you need. It is likely you need the value property.

Set instanceTree to a custom node in Forge 3D viewer

Lets say I'm working with a 3D file which is the combination of one Architectural model and one Structural model.
The instance tree or Model Browser looks like this
root/
Arch/
Level 01/
Level 02/
...
Str/
Level 01/
Level 02/
...
I want to display only the Level 01.
So I:
Followed the steps in the Viewer tutorial
Add an event listener to both Autodesk.Viewing.GEOMETRY_LOADED_EVENT & Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT
When the 2 are fired, I use the code in this article to display only the Level 01 without ghosting.
I have 2 problem with this approach
I have to wait until the entire model is loaded before I can filter the level
After filtering the level, if I click on Model Browser, I can still see the entire model structure (but with everything as hidden except Level 01). How can I set the instance tree to only have what's below?
root/
Arch/
Level 01/
Str/
Level 01/
EDIT
At what point am I supposed to override the shouldInclude() function?
I've tried this and put a breakpoint but it seems it never gets called... I also tried to move it around but in vain.
const start = Date.now();
Autodesk.Viewing.UI.ModelStructurePanel.shouldInclude = (node) => {
Logger.log(node);
return true;
};
Autodesk.Viewing.Initializer(options, () => {
Logger.log(`Viewer initialized in ${Date.now() - start}ms`);
const config = {};
// prettier-ignore
Autodesk.Viewing.theExtensionManager.registerExtension('MyAwesomeExtension', MyAwesomeExtension);
viewerApp = new Autodesk.Viewing.ViewingApplication('MyViewerDiv');
viewerApp.registerViewer(viewerApp.k3D, Autodesk.Viewing.Private.GuiViewer3D, config);
loadDocumentStart = Date.now();
// prettier-ignore
viewerApp.loadDocument(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
});
Regarding #1: the object tree is stored in the file's internal database which - for performance reasons - is only loaded after the actual geometry.
Regarding #2: you can subclass the ModelStructurePanel class and add your own behavior, for example, by overriding the ModelStructurePanel#shouldInclude method.
Since I wasn't able to understand how to use ModelStructurePanel, I overrode Autodesk.Viewing.ViewingApplication.selectItem to only modify the options which are either passed to loadDocumentNode or startWithDocumentNode as below:
const options = {
ids: leafIDs.length > 0 ? leafIDs : null, // changed this line
acmSessionId: this.myDocument.acmSessionId,
loadOptions,
useConsolidation: this.options.useConsolidation,
consolidationMemoryLimit: this.options.consolidationMemoryLimit || 100 * 1024 * 1024, // 100 MB
};
With leafIDs being an array of objectIDs to display. I was able to build it by:
querying the ModelDerivativeAPI using GET :urn/metadata/:guid
going through the tree to find the ids which I am interested in.
There's probably a more elegant way to do this but that's the best I could do so far.

How to dynamically add text to textarea while recording via webkitspeech with Angular 2?

Currently, I record my voice with this simple code in Angular Component
speechToText() {
const {webkitSpeechRecognition}: IWindow = <IWindow>window;
const recognition = new webkitSpeechRecognition();
recognition.lang = 'en-US';
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = event => {
for (let i = event.resultIndex; i < event.results.length; ++i) {
this.interim_transcript = event.results[i][0].transcript;
}
};
recognition.onerror = event => {
console.log('Error occured', event);
};
recognition.start();
}
}
And in my HTML I have the value bind to the interim result
<textarea #description mdInput rows="5" placeholder="Short Story" name="description" [value]="interim_transcript"></textarea>
The problem, however, is that I can see the text being put into the textarea only after I click on the textarea or outside of it to trigger dom update. How to make it update textarea as soon as I begin saying words giving this live text update, same way as here https://www.google.com/intl/en/chrome/demos/speech.html
This happens because Angular is not aware of the update to interim_transcript since it happens outside of what the Zone is aware of.
I see two immediate ways to fix it:
Run the interim_transcript update in a zone.run call. See NgZone in the docs.
Make interim_transcript an Observable. Actually a Subject, but the point is that it needs to be observable.
I'd recommend the latter, and it basically involves this:
When you define interim_transcript, define it like this: interim_transcript: new Subject<string>()
When you update it in the onresult callback, replace
this.interim_transcript = event.results[i][0].transcript;
with
this.interim_transcript.next(event.results[i][0].transcript);
Change the value binding in your template, replace:
[value]="interim_transcript"
with
[value]="interim_transcript | async"
Observables are an incredibly powerful concept that can make your code more easy to reason about (even though it seems very odd at first). It can boost your performance significantly when you start using the OnPush change detection mechanism. Finally, however cheesy it sounds, can change the way you think about your programs, to a data stream mind model instead of state updates. This will likely sound confusing and weird, but I strongly recommend looking into it, I'm sure it will pay off.
Here are a few good resources to get started:
Using Observable from Rangle.io.
Understand and Utilize the Async Pipe in Angular 2 from Brian Troncone

Running MagicZoomPlus.stop(); causes intermittent errors

If I call MagicZoomPlus.stop(); on active magiczooms I'll frequently get the error:
Uncaught TypeError: Cannot read property 'width' of null
At other times I'll get this error:
Uncaught TypeError: Cannot read property 'r' of undefined
When that happens, mousing over the thumbnails triggers:
Uncaught TypeError: Cannot read property 't16' of null
I've tried ...
calling MagicZoomPlus.stop() within the onload event
calling MagicZoomPlus.stop() within a setTimeout of different lengths
calling MagicZoomPlus.stop() after testing for the presence of MagicZoomPlus
testing an image for width/height before calling MagicZoomPlus.stop()
setting width/height on images via css and attributes before calling MagicZoomPlus.stop()
Here's a link to a jsfiddle that uses markup copied from an example on their docs page:
http://jsfiddle.net/sjjju4x4/6/
If you 'run' the fiddle with the console open you'll sometimes get the error, sometimes not. If you reduce the timeout to 10 ms it'll happen more often
Seems like I can't post without a code sample, so here's the JS from the fiddle:
var output = document.getElementById('status');
setTimeout(function () {
document.getElementById('status').textContent = '...............calling stop';
MagicZoomPlus.stop();
}, 20);
Thanks in advance for any help or suggestions you can provide.
Please make sure that the MagicZoom instance is ready before calling MagicZoomPlus.stop().
It is possible to do this with the “onready” callback described at this URL below:
https://www.magictoolbox.com/magiczoomplus/integration/#api
Here is some sample code:
MagicZoomPlus.options = {
'onready': function(id, isUpdated) {
setTimeout(function () {
document.getElementById('status').textContent = '...............calling stop';
MagicZoomPlus.stop(id);
}, 20);
}
};
Here is a jsfiddle to help you see the code:
http://jsfiddle.net/pg9f98z0/

'Global' object in node.js

I am using 0.3.1-pre Node.js
Doing this:
typeof global.parseInt
results in
'undefined'
However when pressing [Tab] in the console after typing 'global.' gives a list of functions, including parseInt.
So is parseInt a member of the global namespace or not?
As of NodeJS v0.8.14 global seems to work across modules like the window object does in the browser.
Test:
a.js:
a1 = console.log; // Will be accessed from b.js
global.a2 = console.log; // Will be accessed from b.js
require('./b.js');
b1('a: b1');
b2('a: b2');
global.b1('a: global.b1');
global.b2('a: global.b2');
b.js:
a1('b: a1');
a2('b: a2');
global.a1('b: global.a1');
global.a2('b: global.a2');
b1 = console.log; // Will be accessed from a.js
global.b2 = console.log; // Will be accessed from a.js
Running a.js outputs:
b: a1
b: a2
b: global.a1
b: global.a2
a: b1
a: b2
a: global.b1
a: global.b2
Apparently, the global object isn't the global object as window is in the browser. It's (according to micheil in #nodejs # freenode) really only used internally. Something about global closures and whatnot.
parseInt and setTimeout and all those buddies are globals on their own. Not part of any visible global object.
Defining variable in app.js without var, just like myvar='someval' makes it visible inside every .js in your project
FAILS:
if( global[ some_object_i_want_to_exist ] ){ ... }
WORKS:
//: outside of all functions, including IIFE.
const THE_GLOBAL_YOU_PROBABLY_WANT_IS_THIS=( this );
//: Within a function:
const G = THE_GLOBAL_YOU_PROBABLY_WANT_IS_THIS;
if( G[ some_object_i_want_to_exist ] ){ ... }
I am assuming you got to this page about "global" in node.js because you wanted the equivalent of "window" in order to check for globally declared variables. bFunc's solution didn't work for me, as it seems to require that one explicitly does something like:
global.some_object_i_want_to_exist = whatever;
as a pre-requisit to using
global[ some_object_i_want_to_exist ]
EDIT: Looking at my code it seems that the only reason my solution worked is because I used "exports.some_object_i_want_to_exist" somewhere else in the
file. Without that, my solution fails. So... I have no clue how to reliable determine if an object exists in a given scope in Node.js.
Here is the documentation on global object:
https://nodejs.org/api/globals.html
I am going to leave my answer here because I hear people are more likely to correct you when you are wrong, so maybe someone will correct me with the answer to the problem.