Back to Repositories

Testing React DevTools Extension Integration in nw.js

This test suite validates the integration of React Developer Tools extension within NW.js environment using Selenium WebDriver. It automates the process of launching the devtools panel and verifying the React debugging functionality.

Test Coverage Overview

The test suite provides comprehensive coverage of React DevTools extension initialization and interaction.

Key areas tested include:

DevTools panel launch and accessibility
React inspector tab selection
Extension frame handling
Window handle management

Implementation Analysis

The implementation utilizes Selenium WebDriver with Python to automate browser interactions and validate React DevTools functionality. The test employs Chrome Options for extension loading and custom window handling patterns specific to NW.js architecture.

Notable patterns include:

Chrome extension loading configuration
Window handle switching logic
Dynamic DevTools panel interaction

Technical Details

Tools and Configuration:

Selenium WebDriver with Chrome driver
Python test framework
Chrome Options for extension loading
Custom utility functions for window management
Implicit wait timeouts
JavaScript execution for panel selection

Best Practices Demonstrated

The test implementation showcases robust automation practices for browser extension testing.

Quality aspects include:

Proper resource cleanup with try-finally blocks
Configurable Chrome driver setup
Structured window handle management
Clear separation of setup and test logic
Appropriate wait mechanisms for UI synchronization

nwjs/nwJs

test/sanity/react-devtools-extension/test.py

            
import time
import os
import sys
sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
from nw_util import *

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

testdir = os.path.dirname(os.path.abspath(__file__))
chrome_options = Options()
chrome_options.add_argument("nwapp=" + testdir)
chrome_options.add_argument("load-extension=" + os.path.join(testdir, 'react-devtools'))

driver = webdriver.Chrome(executable_path=os.environ['CHROMEDRIVER'], chrome_options=chrome_options, service_log_path="log", service_args=["--verbose"])
driver.implicitly_wait(5)
try:
    print(driver.current_url)
    driver.find_element_by_id('showdevtools').click()
    print('wait for devtools open')
    wait_window_handles(driver, 2)
    print('switch to devtools')
    switch_to_devtools(driver, devtools_window=driver.window_handles[-1])
    print('click react panel')
    driver.execute_script('UI.inspectorView.tabbedPane.selectTab(UI.inspectorView.tabbedPane.tabs[9].id)')
    time.sleep(5)
    #driver.switch_to_frame(driver.find_elements_by_class_name("extension")[0])
    #success = False
    #for s in driver.find_elements_by_tag_name('span'):
    #        print s.get_attribute('innerHTML')
    #        if 'trace react updates' in  s.get_attribute('innerHTML'):
    #                success = True
    #                break
    #assert(success)
finally:
    driver.quit()