Skip to content
This repository has been archived by the owner on Dec 11, 2023. It is now read-only.

How do I use KITE to test Electron App #153

Open
ss7424Refar opened this issue Aug 28, 2020 · 6 comments
Open

How do I use KITE to test Electron App #153

ss7424Refar opened this issue Aug 28, 2020 · 6 comments

Comments

@ss7424Refar
Copy link

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

  1. electron APP
  2. Package MainPage into static index.html, and use asar command to package resource / app as app.asar.
  3. 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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

ss7424Refar commented Sep 3, 2020

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

@ss7424Refar ss7424Refar changed the title about electron How do I use KITE to test Electron App Sep 3, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants