WaitForElementVisible not working as expected for iframe

[vishesh-bhagtani]

Description of the bug/issue

When we are performing below steps,
accessibilityFrame = await browser.frame('iframe[src*="index.html"]');
console.log("==============="+accessibilityFrame);

await browser.waitForElementVisible(accessibilityFrame, 20000).click;

browser.frame is able to find and store the element but waitForElementVisible throws accessibilityFrame is not defined

Steps to reproduce

1. Go to '...'
2. Click on '...'
3. Scroll down to '...'
4. See error

Sample test

hooks.js file

const { BeforeAll, AfterAll } = require('@cucumber/cucumber');
const homepage = require("../src/functional_tests/locators/homepageLocators");
const homepageCmd = require("../src/functional_tests/pages/homepage")

// BeforeAll(async function () {
//   try {
//     // Navigate to Google
//     await browser.navigateTo('https://www.google.com/');

//     // Get DevTools targets
//     const targets = await browser.driver.sendAndGetDevToolsCommand('Target.getTargets', {});

//     // Find the DevTools target
//     const devToolsTarget = targets.targetInfos.find(target =>
//       target.type === 'page' && target.url.includes('devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot')
//     );

//     if (!devToolsTarget) {
//       throw new Error('DevTools target not found');
//     }

//     // Switch to the DevTools window
//     await browser.window.switchTo(devToolsTarget.targetId);

//     // Click on the Accessibility Toolkit tab
//     const accessibilityToolkitTab = await browser.element('.main-tabbed-pane').getShadowRoot().find(homepage.ariaAccessbilityExtensionTab);
//     await accessibilityToolkitTab.click();

//     // Wait for the iframe to be visible and switch to it
//     await browser.waitForElementVisible('iframe[src*="index.html"]', 10000);
//     await browser.frame('iframe[src*="index.html"]');

//     // Uncomment the following lines if needed
//     // const signInButton = await browser.element(homepage.signInButton);
//     // await signInButton.click();
//     // await browser.pause(10000); // Adjust the pause if necessary

//   } catch (error) {
//     console.error('Error in BeforeAll hook:', error);
//     throw error; // Ensure the error is propagated to stop the process
//   }
// });


// AfterAll(function () {
//   console.log('After all scenarios, after hook is working fine');
// });
let accessibilityFrame=null;


async function beforeHook() {
  await browser.navigateTo('https://www.google.com/');
  const targets = await browser.driver.sendAndGetDevToolsCommand('Target.getTargets', {});

  const devToolsTarget = targets.targetInfos.find(target => target.type === 'page' && target.url.includes('devtools://devtools/bundled/devtools_app.html?remoteBase=https://chrome-devtools-frontend.appspot'));
  if (!devToolsTarget) {
    throw new Error('DevTools target not found');
  }

  await browser.window.switchTo(devToolsTarget.targetId);
  accessibilityToolkit=browser.element('.main-tabbed-pane').getShadowRoot().find(homepage.ariaAccessbilityExtensionTab)
  await accessibilityToolkit.click();

  // await browser.waitForElementVisible('iframe[src*="index.html"]', 10000);
  accessibilityFrame = await browser.frame('iframe[src*="index.html"]');
  console.log("==============="+accessibilityFrame);
  
  await browser.waitForElementVisible(accessibilityFrame, 20000).click;
  await browser.element('*[aria-label="Start full page scan"]').click();
  await browser.pause(10000)
  // accessibilityFrame = await browser.element('css selector', );



  // const signInButton = await browser.element.findElement(homepage.signInButton).click();
  // browser.pause(10000)
}


module.exports = {
  beforeHook
};

Command to run

npm run test

Verbose Output

verbose log:
  → Running command: frame ('iframe[src*="index.html"]')
 
 → Running command: findElement ({selector, suppressNotFoundErrors}, [Function])
   Request POST /session/e24a63aecab612356467f3b5d03e9abc/elements  
   { using: 'css selector', value: 'iframe[src*="index.html"]' }
   Response 200 POST /session/e24a63aecab612356467f3b5d03e9abc/elements (1918ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': 'f.496C8961F823046924E7F3E07A56C944.d.BA503A31BCB72F1AA2069920AD787BEE.e.45'
       }
     ]
  }
 → Completed command: findElement ({selector, suppressNotFoundErrors}, [Function]) (2007ms)
   Request POST /session/e24a63aecab612356467f3b5d03e9abc/frame  
   {
     id: {
       'element-6066-11e4-a52e-4f735466cecf': 'f.496C8961F823046924E7F3E07A56C944.d.BA503A31BCB72F1AA2069920AD787BEE.e.45',
       ELEMENT: 'f.496C8961F823046924E7F3E07A56C944.d.BA503A31BCB72F1AA2069920AD787BEE.e.45'
     }
  }
===============[object Object]
.U-UUUUUUU 
 → Running command: waitForElementVisible ({element-6066-11e4-a52e-4f735466cecf, ELEMENT}, 20000)
   Response 200 POST /session/e24a63aecab612356467f3b5d03e9abc/frame (396ms)
   { value: null }
 → Completed command: frame ('iframe[src*="index.html"]') (2644ms)
  ✖ NightwatchAssertError
   Timed out while waiting for element <undefined> to be present for 20000 milliseconds. - expected "visible" but got: "not found" (20116ms)

    Error location:
    /Users/vishesh/Downloads/ui_practice/src/hooks.js:69
    –––––––––––––––––––––––––––––––––––––––––––––––––––
     67 |   console.log("==============="+accessibilityFrame);
     68 |   
     69 |   await browser.waitForElementVisible(accessibilityFrame, 20000).click; 
     70 |   // accessibilityFrame = await browser.element('css selector', );
     71 | 
    –––––––––––––––––––––––––––––––––––––––––––––––––––

 → Completed command: waitForElementVisible ({element-6066-11e4-a52e-4f735466cecf, ELEMENT}, 20000) (20165ms)

Nightwatch Configuration

const path = require('path');

module.exports = {
  src_folders: ['src/functional_tests'],
  silent: false,
  hooks_path: ['src/hooks.js'],

  page_objects_path: ['src/functional_tests/pages'],

  custom_commands_path: ['src/functional_tests/commands'],

  locators_path: ['src/functional_tests/locators'],
  // globals_path: `configs/${process.env.PROFILE}.js`,
  baseFeaturePath: 'src/functional_tests/features',

  test_workers: {
    enabled: true
  },

  test_settings: {
    default: {
      disable_error_log: false,
      launch_url: 'http://localhost',

      screenshots: {
        enabled: false,
        path: 'screens',
        on_failure: true
      },

      globals: {
        asyncHookTimeout: 60000 // Increase timeout to 60 seconds
      },

      desiredCapabilities: {
        browserName: "chrome",
        javascriptEnabled: true,
        acceptSslCerts: true,
        chromeOptions: {
          "args": [
            `--load-extension=${path.join(__dirname, 'extensions/1.3.2.3-staging')}`,
            `--auto-open-devtools-for-tabs`,
            `--start-maximized`
          ],
          "prefs": {
            'devtools.preferences': {
              'InspectorView.splitViewState': JSON.stringify({
                vertical: { size: 500 },
                horizontal: { size: 0 },
              }),
              'currentDockState': '"bottom"',
              'panel-selectedTab': '"Accessibility Toolkit"',
            }
          },
        }
      },

      webdriver: {
        start_process: true,
        server_path: '',
      },

      cucumber: path.resolve(__dirname, 'cucumber.conf.js'),

      test_runner: {
        type: 'cucumber',
        // define cucumber specific options
        options: {
          //set the feature path
          feature_path: 'src/functional_tests/features',
          cucumberArgs: [
            '--require', './cucumber.conf.js'
          ],
        },

    

      },

      chrome: {
        desiredCapabilities: {
          browserName: 'chrome',
          'goog:chromeOptions': {
            // Additional Chrome options if needed
          }
        },

        webdriver: {
          start_process: true,
          server_path: '',
          cli_args: [
            // --verbose
          ]
        }
      },

      // BrowserStack configurations
      browserstack: {
        selenium: {
          host: 'hub.browserstack.com',
          port: 443
        },
        desiredCapabilities: {
          'bstack:options': {
            userName: '${BROWSERSTACK_USERNAME}',
            accessKey: '${BROWSERSTACK_ACCESS_KEY}'
          }
        },
        disable_error_log: true,
        webdriver: {
          timeout_options: {
            timeout: 15000,
            retry_attempts: 3
          },
          keep_alive: true,
          start_process: false
        }
      },

      'browserstack.local': {
        extends: 'browserstack',
        desiredCapabilities: {
          'browserstack.local': true
        }
      },

      'browserstack.chrome': {
        extends: 'browserstack',
        desiredCapabilities: {
          browserName: 'chrome',
          'goog:chromeOptions': {
            w3c: true
          }
        }
      },

      'browserstack.local_chrome': {
        extends: 'browserstack.local',
        desiredCapabilities: {
          browserName: 'chrome'
        }
      },
    }
  }
};

Nightwatch.js Version

3.7.0

Node Version

18.20.0

Browser

Chrome 127

Operating System

No response

Additional Information

No response