Issues with selector & angular cdk

Libraries Browser
1

I am trying to use RobotFramework Browser to run Front-End tests on a page that uses angular’s cdks for dynamically loaded content in form fields.

My issues are the following:

  1. I am forced to use a sleep command after filling a form field for the content to load from the backend. This is rather inconsistent across differing network qualities. Is there a better way to solve this? I’ve tried using wait for load state network idle to no avail, as the form field doesn’t seem to recognize that I’ve finished with my input & am waiting for the backend content.
  2. The selector seems unable to locate the dynamically generated drop down content using any kind of matching. As of now I have managed to get it to run using keyboard commands (arrow down/up). Is there a better way to do this that I’m missing?
2

AFAIK, angular’s state can be queried via javascript but i didn’t find the piece of js code to execute that. If you can find something, then you can add js extension that would wait for such state to happen. Just today i made something similar but for loading fonts that looks something like this;

async function fontsReady(page, logger) {
  await page.waitForFunction(() => document.fonts.ready);
}
exports.__esModule = true;
exports.fontsReady= fontsReady;

So, for angular, you would need to replace the implementation of the arrow function …

3

@michaellui Have you tried this https://marketsquare.github.io/robotframework-browser/Browser.html#Wait%20For%20All%20Promises
Give the matcher argument the request URL that gets triggered when you enter something in the form field and replace the Click keyword, with your keyword to fill the form field.

4

Have you looked at the keyword Get Element States?

https://marketsquare.github.io/robotframework-browser/Browser.html#Get%20Element%20States

You could use this to wait for an expected element to be visible.

5

Wait for angular ready javascript side here;

I dunno if that works for all angular versions but that should give an idea what sort of js you could call …