I have developed an application using Ext JS and am currently creating tests for it using Selenium WebDriver (using the Node package - version 4.0.0-alpha.1) along with Jest. One of my test scripts requires waiting for a specific function to be invoked before proceeding with the remaining test logic, and I'm unsure about the best approach to achieve this. To illustrate this scenario, I prepared a sample application using Sencha Fiddle. The complete code for the app along with its running instance can be accessed here: . Within the app folder in the fiddle, there is a Test component containing a straightforward controller with an onAdd function, which I aim to wait for execution before continuing as other tests rely on its content. By utilizing the following code line in dev tools, the function can be called: Ext.ComponentQuery.query('test')[0].getController().onAdd (it's crucial that the activeElement is set to the preview iFrame document.getElementsByName('fiddle-run-iframe')[0] within the fiddle). This enables me to access the function in driver.executeScript similarly, but I'm uncertain about how to properly wait for its invocation beforehand. My attempt at leveraging the mock/spy functionality in Jest failed because jest was not recognized inside driver.executeScript, preventing calls to jest.fn or jest.spyOn. A sample test script aligned with the sample app demonstrates what I'm trying to achieve, though it currently throws an error due to the absence of jest definition within driver.executeScript.
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")]')))));
await driver.executeScript(() => {
const test = document.getElementsByName('fiddle-run-iframe')[0].contentWindow.Ext.ComponentQuery.query('test')[0];
spy = jest.spyOn(test.getController(), 'onAdd'); //This throws an error since jest is not defined inside driver.executeScript
});
expect(spy).toHaveBeenCalled(); //wait for onAdd function to be called before continuing
});
//additional tests occur here after wait...
});
The iframe navigation-related logic can be disregarded as it's solely relevant to the fiddle environment where the app runs within an iframe. In actuality, my application is not contained within an iframe. Nevertheless, I believe this script effectively conveys my objective of awaiting the onAdd function call prior to proceeding with the testing processes. Unsure if Selenium, Jest, a blend of both, or an alternative testing tool would be suitable for accomplishing this task. Being relatively new to test writing, this marks my first time seeking guidance on Stack Overflow, so I apologize for any lack of clarity in my explanation. Happy to provide additional information and grateful for any insights or advice!