A tool to enable automated Selenium WebDriver testing for Flutter Web applications compiled with CanvasKit.
npm install @rentready/flutter-selenium-bridgeenableAccessibility() method provided by Flutter Selenium Bridge automates the process of making Flutter web elements accessible to Selenium by simulating a click on a hidden button that populates the DOM tree with semantic placeholders.
Ctrl+Shift+I on Windows/Linux or Cmd+Option+I on macOS).
javascript
document.querySelector('flt-glass-pane').shadowRoot.querySelector('flt-semantics-placeholder').click();
`
This script clicks the hidden flt-semantics-placeholder button, which triggers the population of the DOM tree with UI elements, making them accessible for testing.
!DOM Tree Expanded
By performing this action manually, you can verify that the DOM tree of your Flutter web application is correctly populated. This is a crucial step for effectively using the Flutter Selenium Bridge package, as it ensures that you can find and interact with the Flutter elements during your testing.
Once you have confirmed that you can manually populate the DOM tree and identify elements, you can proceed to use the automated enableAccessibility() method provided by the package in your test scripts.
Installation
To install Flutter Selenium Bridge, run the following command:
1. Install the package:
`sh
npm install flutter-selenium-bridge --save-dev
`
Usage
After installation, you can import FlutterSeleniumBridge in your test files and use it to interact with your Flutter Web application:
`javascript
const { FlutterSeleniumBridge } = require('@rentready/flutter-selenium-bridge');
// Or, if using ES6 imports
import { FlutterSeleniumBridge } from '@rentready/flutter-selenium-bridge';
// Your test code here
`
$3
To interact with UI components rendered by Flutter's CanvasKit renderer, you need to enable accessibility first. This allows Selenium to recognize and interact with the components as if they were standard HTML elements.
`javascript
const { Builder } = require('selenium-webdriver');
const { FlutterSeleniumBridge } = require('@rentready/flutter-selenium-bridge');
(async () => {
const driver = await new Builder()
.forBrowser('chrome')
.build();
const bridge = new FlutterSeleniumBridge(driver);
await driver.get('http://127.0.0.1:8000'); // Replace with your Flutter Web app URL
await bridge.enableAccessibility();
})();
`
$3
If you need to set values in input fields within your Flutter Web application, use the activateInputField method before. This method ensures that the input field is ready to receive text input.
`javascript
(async () => {
// ... (after initializing driver and bridge, and navigating to your web app)
const nameInputXPath = '//flt-semantics[@id="flt-semantic-node-5"]/input';
const nameInput = await bridge.activateInputField(By.xpath(nameInputXPath));
await nameInput.sendKeys('Your Name');
})();
`
$3
Once accessibility is enabled, you can interact with elements on the page using standard Selenium methods.
`javascript
(async () => {
// ... (after enabling accessibility)
const buttonXPath = '//flt-semantics[contains(@aria-label, "Click Me")]';
const clickMeButton = await driver.findElement(By.xpath(buttonXPath));
await clickMeButton.click();
// Verify that the expected response appears
const responseXPath = '//flt-semantics[contains(@aria-label, "You clicked me")]';
const responseLabel = await driver.findElement(By.xpath(responseXPath));
// ... (assertions or further interactions)
})();
``