[selenium-users] Waiting For A Function To Be Called

[j***@hcssupport.com]

I have a web application built using Ext JS that I am writing tests for
using Selenium WebDriver (the Node package
<https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/>)
and Jest. I have a case where I need for to wait for a function that's on
one of the components in the app to be called before continuing and I am
having trouble implementing that in my testing code. I created a sample app
using Sencha Fiddle as a simple way to try to test this. That app and all
it's code can be seen here:
https://fiddle.sencha.com/#view/editor&fiddle/2o6m. Looking in the app
folder of the fiddle, you'll see that I have a Test component with a simple
controller. I want to wait until the onAdd function in that component's
controller is called before moving on with the tests because in my actual
application there is code in that function that the remaining tests are
dependent on. When the active element is set to the iFrame that has the
preview of the app (document.getElementsByName('fiddle-run-iframe')[0]), I
can access that function in dev tools by running the following line of
code: Ext.ComponentQuery.query('test')[0].getController().onAdd. That means
I can also get the function inside of driver.executeScript, but once I get
the function I am note sure how to wait for it to be called before moving
on with the remainder of the tests. I was trying to use Jest's mock/spy
feature but I could not get this to work since jest is not defined inside
driver.executeScript so I can't call jest.fn or jest.spyOn. I wrote a
sample test script to go with the app in the fiddle that demonstrates what
I am trying to do, but right now it fails with an error since, as I said,
jest is not defined in driver.executeScript. Here is the code for my sample
test script:

const {Builder, By, Key, until} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const driver = global.driver = new Builder()
.forBrowser('chrome')
.setChromeOptions(new chrome.Options())
.build();

jest.setTimeout(10000);

beforeAll(async () => {
await driver.manage().window().maximize();
await driver.get('https://fiddle.sencha.com/#view/editor&fiddle/2o6m');
});

afterAll(async () => {
await driver.quit();
});


describe('check title', () => {
it('should be SAMPLE STORE LOAD', async () => {
expect(await
driver.wait(until.elementLocated(By.css('.fiddle-title'))).getText()).toBe('SAMPLE
STORE LOAD');
});
});

describe('check store add', () => {
it('should call add function', async () => {
let spy;

await driver.switchTo().frame(await
driver.findElement(By.name('fiddle-run-iframe')));
await driver.wait(until.elementIsNotVisible(await
driver.wait(until.elementLocated(By.xpath('//div[starts-with(@id,
"loadmask")]')))));
console.log(await driver.executeScript(() => {
const test =
document.getElementsByName('fiddle-run-iframe')[0].contentWindow.Ext.ComponentQuery.query('test')[0];
spy = jest.spyOn(test.getController(), 'onAdd');
}));

expect(spy).toHaveBeenCalled(); //wait for onAdd function to be called
before continuing
});
});

You can ignore all the logic related switching to the preview iframe since
that is just necessary because of how Sencha Fiddle works. My actual app
does not exist inside an iFrame. However, this script still effectively
demonstrates what I am trying to accomplish which is to wait until the
onAdd function is called before continuing with my tests. I am not sure
whether that needs to be handled using Selenium or Jest, some combination
of the two, or a different testing tool completely (perhaps what I am
trying to do cannot be done using Selenium/Jest). I am relatively new to
testing and this is also my first time posting in this group so I applogize
if anything I said does not make sense. I would be happy to clarify
anything if you have any questions and grateful for any advice you have to
offer!

[L M Salopek]

When I need to wait for a change in the DOM, such as the addition or
removal of a node, I use MutationObservers

-Laurie

Post by j***@hcssupport.com
I have a web application built using Ext JS that I am writing tests for
using Selenium WebDriver (the Node package
<https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/>)
and Jest. I have a case where I need for to wait for a function that's on
one of the components in the app to be called before continuing and I am
having trouble implementing that in my testing code. I created a sample app
using Sencha Fiddle as a simple way to try to test this. That app and all
https://fiddle.sencha.com/#view/editor&fiddle/2o6m. Looking in the app
folder of the fiddle, you'll see that I have a Test component with a simple
controller. I want to wait until the onAdd function in that component's
controller is called before moving on with the tests because in my actual
application there is code in that function that the remaining tests are
dependent on. When the active element is set to the iFrame that has the
preview of the app (document.getElementsByName('fiddle-run-iframe')[0]), I
can access that function in dev tools by running the following line of
code: Ext.ComponentQuery.query('test')[0].getController().onAdd. That means
I can also get the function inside of driver.executeScript, but once I get
the function I am note sure how to wait for it to be called before moving
on with the remainder of the tests. I was trying to use Jest's mock/spy
feature but I could not get this to work since jest is not defined inside
driver.executeScript so I can't call jest.fn or jest.spyOn. I wrote a
sample test script to go with the app in the fiddle that demonstrates what
I am trying to do, but right now it fails with an error since, as I said,
jest is not defined in driver.executeScript. Here is the code for my sample
const {Builder, By, Key, until} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const driver = global.driver = new Builder()
.forBrowser('chrome')
.setChromeOptions(new chrome.Options())
.build();
jest.setTimeout(10000);
beforeAll(async () => {
await driver.manage().window().maximize();
await driver.get('https://fiddle.sencha.com/#view/editor&fiddle/2o6m');
});
afterAll(async () => {
await driver.quit();
});
describe('check title', () => {
it('should be SAMPLE STORE LOAD', async () => {
expect(await
driver.wait(until.elementLocated(By.css('.fiddle-title'))).getText()).toBe('SAMPLE
STORE LOAD');
});
});
describe('check store add', () => {
it('should call add function', async () => {
let spy;
await driver.switchTo().frame(await
driver.findElement(By.name('fiddle-run-iframe')));
await driver.wait(until.elementIsNotVisible(await
"loadmask")]')))));
console.log(await driver.executeScript(() => {
const test =
document.getElementsByName('fiddle-run-iframe')[0].contentWindow.Ext.ComponentQuery.query('test')[0];
spy = jest.spyOn(test.getController(), 'onAdd');
}));
expect(spy).toHaveBeenCalled(); //wait for onAdd function to be called
before continuing
});
});
You can ignore all the logic related switching to the preview iframe since
that is just necessary because of how Sencha Fiddle works. My actual app
does not exist inside an iFrame. However, this script still effectively
demonstrates what I am trying to accomplish which is to wait until the
onAdd function is called before continuing with my tests. I am not sure
whether that needs to be handled using Selenium or Jest, some combination
of the two, or a different testing tool completely (perhaps what I am
trying to do cannot be done using Selenium/Jest). I am relatively new to
testing and this is also my first time posting in this group so I applogize
if anything I said does not make sense. I would be happy to clarify
anything if you have any questions and grateful for any advice you have to
offer!
--
You received this message because you are subscribed to the Google Groups
"Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an
To view this discussion on the web visit
https://groups.google.com/d/msgid/selenium-users/43b8f717-f19d-4b65-829d-c71d65d567f9%40googlegroups.com
<https://groups.google.com/d/msgid/selenium-users/43b8f717-f19d-4b65-829d-c71d65d567f9%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.

[j***@hcssupport.com]

Hi Laurie,

Thanks for replying to my question! I thought I would have to rely on DOM
changes but in this case waiting for the function to be called would have
been easier. However, based on what I've been reading on Stack Overflow and
what you said about using MutationObservers, it seems like waiting for a
function is not possible so I will have to figure out a way to get the DOM
watching solution to work in this case.

Thanks again for your reply!

Jack

Post by L M Salopek
When I need to wait for a change in the DOM, such as the addition or
removal of a node, I use MutationObservers
-Laurie

Post by j***@hcssupport.com
I have a web application built using Ext JS that I am writing tests for
using Selenium WebDriver (the Node package
<https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/>)
and Jest. I have a case where I need for to wait for a function that's on
one of the components in the app to be called before continuing and I am
having trouble implementing that in my testing code. I created a sample app
using Sencha Fiddle as a simple way to try to test this. That app and all
https://fiddle.sencha.com/#view/editor&fiddle/2o6m. Looking in the app
folder of the fiddle, you'll see that I have a Test component with a simple
controller. I want to wait until the onAdd function in that component's
controller is called before moving on with the tests because in my actual
application there is code in that function that the remaining tests are
dependent on. When the active element is set to the iFrame that has the
preview of the app (document.getElementsByName('fiddle-run-iframe')[0]), I
can access that function in dev tools by running the following line of
code: Ext.ComponentQuery.query('test')[0].getController().onAdd. That means
I can also get the function inside of driver.executeScript, but once I get
the function I am note sure how to wait for it to be called before moving
on with the remainder of the tests. I was trying to use Jest's mock/spy
feature but I could not get this to work since jest is not defined inside
driver.executeScript so I can't call jest.fn or jest.spyOn. I wrote a
sample test script to go with the app in the fiddle that demonstrates what
I am trying to do, but right now it fails with an error since, as I said,
jest is not defined in driver.executeScript. Here is the code for my sample
const {Builder, By, Key, until} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const driver = global.driver = new Builder()
.forBrowser('chrome')
.setChromeOptions(new chrome.Options())
.build();
jest.setTimeout(10000);
beforeAll(async () => {
await driver.manage().window().maximize();
await driver.get('https://fiddle.sencha.com/#view/editor&fiddle/2o6m');
});
afterAll(async () => {
await driver.quit();
});
describe('check title', () => {
it('should be SAMPLE STORE LOAD', async () => {
expect(await
driver.wait(until.elementLocated(By.css('.fiddle-title'))).getText()).toBe('SAMPLE
STORE LOAD');
});
});
describe('check store add', () => {
it('should call add function', async () => {
let spy;
await driver.switchTo().frame(await
driver.findElement(By.name('fiddle-run-iframe')));
await driver.wait(until.elementIsNotVisible(await
"loadmask")]')))));
console.log(await driver.executeScript(() => {
const test =
document.getElementsByName('fiddle-run-iframe')[0].contentWindow.Ext.ComponentQuery.query('test')[0];
spy = jest.spyOn(test.getController(), 'onAdd');
}));
expect(spy).toHaveBeenCalled(); //wait for onAdd function to be called
before continuing
});
});
You can ignore all the logic related switching to the preview iframe
since that is just necessary because of how Sencha Fiddle works. My actual
app does not exist inside an iFrame. However, this script still effectively
demonstrates what I am trying to accomplish which is to wait until the
onAdd function is called before continuing with my tests. I am not sure
whether that needs to be handled using Selenium or Jest, some combination
of the two, or a different testing tool completely (perhaps what I am
trying to do cannot be done using Selenium/Jest). I am relatively new to
testing and this is also my first time posting in this group so I applogize
if anything I said does not make sense. I would be happy to clarify
anything if you have any questions and grateful for any advice you have to
offer!
--
You received this message because you are subscribed to the Google Groups
"Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an
<javascript:>.
To view this discussion on the web visit
https://groups.google.com/d/msgid/selenium-users/43b8f717-f19d-4b65-829d-c71d65d567f9%40googlegroups.com
<https://groups.google.com/d/msgid/selenium-users/43b8f717-f19d-4b65-829d-c71d65d567f9%40googlegroups.com?utm_medium=email&utm_source=footer>
.
For more options, visit https://groups.google.com/d/optout.