How do I use KITE to test Electron App

ss7424Refar commented 3 years ago

Hi! How do I use KITE to test the following situations:

electron APP
Package MainPage into static index.html, and use asar command to package resource / app as app.asar.
The page seems cannot be accessed by local chrome.exe because it has packaged to app.asar.

I saw on KITE-Sample-Tests seems to open a webRTC URL (like jitsi, mediasoup) in the Step, so that the next test can be carried out.

If there is any good method, please let me know. Thank you!

namvuCosmo commented 3 years ago

Hi,

Normally the step to open an URL is done for browsers only, it can also be call for electron app acting as a browser, but I think this defeats the purpose of electron being an app on its own. If the index.html is the default page for your app, which appears when the app is open, then calling this step is not necessary.

It's been a while since my last attempt at electron app. For electron, there are a few things that need to be configured differently from the normal chrome:

When setting up the node for electron, you'll need to point to the electron executable with the chrome_binary parameter, I'm not sure how, or if, this works with app package with asar.
The chromedriver also needs to be compatible with the electron version that you are using. I think you can find it somewhere in here

I'm not sure if this will still work. Can you share your setup to test your scenario?

ss7424Refar commented 3 years ago

Hi!

Thank you for reply! I will try your advise. but can you show how to set chrome_binary in where?

I search chrome_binary keyword in KITE-Sample-Test, then cannot find this setting. I think it in here , if i am right .

Can you show me how to write this configuration file in simply?

namvuCosmo commented 3 years ago

It's when you setup the node in the grid which you use to run the test.

This is a sample command line to setup the node on WINDOWS for example:

java -Dwebdriver.chrome.driver="C:/Selenium/chrome-stable/chromedriver.exe" -jar "C:\Selenium\selenium.jar" -role node -hub http://localhost:4445/grid/register/ -port 5001 -remoteHost http://localhost:5001 -browser browserName=chrome,version=84,platform=WINDOWS,chrome_binary="C:\Program Files (x86)\Google\Chrome\Application\chrome.exe",maxInstances=5

ss7424Refar commented 3 years ago

Hi!

Sorry for the late reply. because I have been wondering about the command you gave me: chrome_binary. Why the value is chrome.exe ...

According to your opinion, this value should be the electron executable path ?

For example. such as MyApp.exe . The following is the file structure of electron app I want to test.

My-Project-win32-x64
├── MyApp.exe
├── locales
├── resources
│   ├── app.asar

KITE said that it supports Electron App . The function that appears in my mind should be that KITE can start-up MyApp.exe, find HTML element in the application and do keyboard action like Selenium Framework. I'm not sure if my understanding is correct.

I was found startNode.sh in KITE which similar to the script you provided. But I installed KITE to Ubuntu . I think I need to rebuild a new test environment on windows .

namvuCosmo commented 3 years ago

The command I mentioned was just an example cmd to setup chrome node, the value for chrome_binary can be to any chrome-base executable, which in your case will be to your MyApp.exe.

It should be the same whether you are on Ubuntu or Windows. As long as you have the correct driver and the app can be opened, anything after that can be automated with Selenium framework.

ss7424Refar commented 3 years ago

Hi!

I takes several times to check the command work or not. The result is I think chrome_binary can start Electron App window, but seem cannot find HTML element by CSS selector and cannot use selenium-driver's function (such as getTitle()). i thought a simple case to Test it . The following is my Test steps. My code is in here.

download sample for Electron App

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start

change index.html's content . it has a button which click will promt hello message.

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
     </head>
    <body>
     <button id="hello" onclick="hello2()" style="color: rgb(163, 30, 30);">hello</button>
     <script src="./renderer.js"></script>
</body>
</html>

change renderer.js's content

function hello2() {
  alert('hello');
  console.log(process.versions)
}

build app use electron-packager

electron-packager ./ --out ./ers-app --platform=linux --arch=x64 --overwrite --asar

my electron-chrome version is 73.0.3683.121, so i download driver from here
replace the driver to $KITE_HOME/localGrid/chrome/

modify the $KITE_HOME/localGrid/chrome/startNode.sh as blow. i also replace the version and chrome_binary

java -Dwebdriver.chrome.driver=./chromedriver -jar ../selenium.jar -role node -maxSession 5 -port 6001 -host localhost -hub http://localhost:4444/grid/register -browser browserName=chrome,version="73.0.3683.68",platform=LINUX,chrome_binary="/opt/electron-quick-start/ers-app/electron-quick-start-linux-x64/electron-quick-start",maxInstances=5 --debug

change $KITE_HOME/localGrid/chrome/gridConfig.sh as blow. and Re excute the script .
```
export CHROMEDRIVER_VERSION=73.0.3683.68
```

i wanna only startNode for chrome .so i comment the $KITE_HOME/localGrid/chrome/startNode.sh about firefox.

 cd /opt/GitHub/KITE/localGrid/hub
 x-terminal-emulator -e ./startHub.sh
 cd /opt/GitHub/KITE/localGrid/chrome
 x-terminal-emulator -e ./startNode.sh

# cd /opt/GitHub/KITE/localGrid/firefox
# x-terminal-emulator -e ./startNode.sh

i am going to test it . The imaged steps is click the hello button and getTitle , takeScreenshot. so i write script base on KITE-Example-Test by JavaScript. firstly, i change $KITE_HOME/KITE-Example-Test/configs/js.example.json to only start chrome.

{
"name": "Kite Test Example Electron with Allure reporting",
"grids": [
{
  "type": "local",
  "url": "http://localhost:4444/wd/hub"
}
],
"tests": [
{
  "name": "JS KiteExampleSearchTest %ts",
  "tupleSize": 1,
  "description": "This example test opens google and searches for Cosmo Software Consulting and verify the first result",
  "testImpl": "Example.js",
  "payload": {
    "test1": "ONE"
  }
}
],
"clients": [
{
  "browserName": "chrome",
  "platform": "localhost"
}
]
}

$KITE_HOME/KITE-Example-Test/Example.js's testScript() function as blow

this.driver = await WebDriverFactory.getDriver(this.capabilities);
this.page = new GoogleSearchPage(this.driver);

// let googleSearchStep = new GoogleSearchStep(this, "https://baidu.com");
// await googleSearchStep.execute(this);

this.page = new GoogleResultPage(this.driver);
let googleFirstResultCheck = new GoogleFirstResultCheck(this);
await googleFirstResultCheck.execute(this);

$KITE_HOME/KITE-Example-Test/js/checks/GoogleFirstResultCheck.js's step() function as blow.

   await this.page.openFirstResult(this.driver);
   let found = await this.page.getTitle(this.driver);
   // if (found != this.expectedResult) {
   //   throw new KiteTestError(Status.FAILED, "The title of the first Google result was not correct: \n" +
   //   "Expected: " + this.expectedResult + " but found " + found);
   // }
   console.log(found)

$KITE_HOME/KITE-Example-Test/js/pages/GoogleResultPage.js's openFirstResult() and elements.

const elements = {
   result: By.id('hello'),
}
//  find hello button in 2s. then click it.
async openFirstResult() {
    let result = await this.driver.wait(until.elementLocated(elements.result), 2000);
    await result.click();
}

run the js script . then it run timeout because cannot find hello button by css selector.
```
cd $KITE_HOME/KITE-Example-Test/
r configs/js.example.config.json
```

Timeout Pic

webrtc / KITE

How do I use KITE to test Electron App #153