Electron으로 만든 화면의 자동 조작
사전 쓰기
Electron을 사용하면 node.js를 사용하여 멀티 플랫폼 화면을 만들 수 있습니다.
이번에는 이 Electron으로 작성된 화면의 자동 조작에 대해 생각해 봅시다.
테스트용 화면 만들기
다음과 유사한 파일을 만듭니다.
package.json{
"name": "test-app",
"version": "0.9.0",
"description": "test-app",
"main": "app.js",
"author": "Name",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^6.0.12"
}
}
app.jsconst electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;
app.on('ready', () => {
//メインウィンドウの定義：サイズ以外にもいろいろ設定可能
mainWindow = new BrowserWindow(
{
width: 600,
height: 400,
'min-width': 300,
'min-height': 200,
}
);
//現在実行中のファイルディレクトリパスの下のindex.htmlを読みに行く。
mainWindow.loadURL('file://' + __dirname + '/index.html');
//メインウィンドウ終了時の処理
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html<!DOCTYPE html>
<html>
<head>
<meta Http-Equiv="content-type" Content="text/html;charset=UTF-8">
<title>Electronテストアプリ</title>
</head>
<body>
Hello Electron
<input id="txt" type="TEXT"></input>
<button id="btn" >ボタン</button>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.jsconst btnCtrl = document.getElementById('btn');
btnCtrl.onclick = function(element) {
alert(document.getElementById('txt').value + "を出力");
};
이러한 파일을 패키징합니다. 다음 페이지를 참고하십시오.
Electron: 앱 실행 및 exe 만들기
htps : // 우에 b에서 v. 하테나 bぉg. 코 m / 엔 트리 / 으 b / js / 에 ct 론 / 룬 - 아 p 앤 dc
작성된 Exe는 다음과 같습니다.
버튼을 누르면 텍스트로 입력한 문자를 팝업 표시합니다.
Selenium에서 자동 조작하는 방법
결국 Chrome과 동일하므로 Selenium을 사용할 수 있습니다.
그러나 사용하는 WebDriver는 Electron의 것을 사용합니다.
사용한 Electron 버전에 있던 WebDriver를 구하십시오.
htps : // 기주 b. 코 m / 에이 ct 론 / 에에 ct 론 / ぇ 아세 s
파이썬 예제
기본적으로 Chrome의 자동 조작으로 실시한 Selenium과 같은 구현입니다.
하지만 ChromeOptions의 binary_location에 electron 애플리케이션의 경로를 지정합니다.
from selenium import webdriver
from selenium.webdriver.support.ui import Select
options = webdriver.ChromeOptions()
options.binary_location = 'C:\\dev\\node\\electronsample\\test-app-win32-x64\\test-app.exe'
print(options.binary_location)
# 使用しているElectronのVersionにあうWebDriverを入手すること！！！
# https://github.com/electron/electron/releases?after=v7.0.0-beta.6
driver = webdriver.Chrome("C:\\tool\\selenium\\chromedriver-v6.0.12-win32-x64\\chromedriver.exe", options=options)
#
driver.find_element_by_id("txt").send_keys("名前太郎")
driver.find_element_by_id("btn").click()
print(driver.switch_to.alert.text)
driver.switch_to.alert.accept()
driver.close()
Node.js 예제
ChromeOptions의 setChromeBinaryPath를 사용하여 electron 애플리케이션의 경로를 지정합니다.
// https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const path = 'C:\\tool\\selenium\\chromedriver-v6.0.12-win32-x64\\chromedriver.exe';
const options = new chrome.Options();
// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Options.html
options.setChromeBinaryPath('C:\\dev\\node\\electronsample\\test-app-win32-x64\\test-app.exe');
const service = new chrome.ServiceBuilder(path).build();
chrome.setDefaultService(service);
(async () => {
const driver = await new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
.setChromeOptions(options)
.build();
await driver.findElement(webdriver.By.id("txt")).sendKeys("名前太郎");
await driver.findElement(webdriver.By.id("btn")).click();
let alert = await driver.switchTo().alert();
console.log(await alert.getText());
await alert.accept();
driver.quit();
})();
결과
UiPath로 작업하는 경우
Chrome을 사용하는 경우 브라우저 확장 프로그램과 함께 작동했지만 Electron의 경우 브라우저의 확장 프로그램을 사용할 수 없습니다.
어디까지나 Windows의 화면으로서 조작하기 때문에, 간단한 텍스트 입력이나 버튼 클릭은 문제 없습니다만, JavaScript의 실행등은 불가능하다고 생각됩니다.
※ 어쨌든 시도해보고 텍스트 입력이나 버튼 클릭은 할 수 있었지만, JS 스크립트 삽입은 실패했다.
요약
Electron에서 작성한 화면은 Selenium을 이용하여 브라우저의 자동 조작과 마찬가지로 자동 조작을 할 수 있습니다.
하지만 WebDriver는 Electron용을 사용합니다.
Reference
이 문제에 관하여(Electron으로 만든 화면의 자동 조작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mima_ita/items/32265ea071d291c750ed
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
다음과 유사한 파일을 만듭니다.
package.json
{
"name": "test-app",
"version": "0.9.0",
"description": "test-app",
"main": "app.js",
"author": "Name",
"scripts": {
"start": "electron ."
},
"devDependencies": {
"electron": "^6.0.12"
}
}
app.js
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;
app.on('ready', () => {
//メインウィンドウの定義：サイズ以外にもいろいろ設定可能
mainWindow = new BrowserWindow(
{
width: 600,
height: 400,
'min-width': 300,
'min-height': 200,
}
);
//現在実行中のファイルディレクトリパスの下のindex.htmlを読みに行く。
mainWindow.loadURL('file://' + __dirname + '/index.html');
//メインウィンドウ終了時の処理
mainWindow.on('closed', function() {
mainWindow = null;
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta Http-Equiv="content-type" Content="text/html;charset=UTF-8">
<title>Electronテストアプリ</title>
</head>
<body>
Hello Electron
<input id="txt" type="TEXT"></input>
<button id="btn" >ボタン</button>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
index.js
const btnCtrl = document.getElementById('btn');
btnCtrl.onclick = function(element) {
alert(document.getElementById('txt').value + "を出力");
};
이러한 파일을 패키징합니다. 다음 페이지를 참고하십시오.
Electron: 앱 실행 및 exe 만들기
htps : // 우에 b에서 v. 하테나 bぉg. 코 m / 엔 트리 / 으 b / js / 에 ct 론 / 룬 - 아 p 앤 dc
작성된 Exe는 다음과 같습니다.
버튼을 누르면 텍스트로 입력한 문자를 팝업 표시합니다.
Selenium에서 자동 조작하는 방법
결국 Chrome과 동일하므로 Selenium을 사용할 수 있습니다.
그러나 사용하는 WebDriver는 Electron의 것을 사용합니다.
사용한 Electron 버전에 있던 WebDriver를 구하십시오.
htps : // 기주 b. 코 m / 에이 ct 론 / 에에 ct 론 / ぇ 아세 s
파이썬 예제
기본적으로 Chrome의 자동 조작으로 실시한 Selenium과 같은 구현입니다.
하지만 ChromeOptions의 binary_location에 electron 애플리케이션의 경로를 지정합니다.
from selenium import webdriver
from selenium.webdriver.support.ui import Select
options = webdriver.ChromeOptions()
options.binary_location = 'C:\\dev\\node\\electronsample\\test-app-win32-x64\\test-app.exe'
print(options.binary_location)
# 使用しているElectronのVersionにあうWebDriverを入手すること！！！
# https://github.com/electron/electron/releases?after=v7.0.0-beta.6
driver = webdriver.Chrome("C:\\tool\\selenium\\chromedriver-v6.0.12-win32-x64\\chromedriver.exe", options=options)
#
driver.find_element_by_id("txt").send_keys("名前太郎")
driver.find_element_by_id("btn").click()
print(driver.switch_to.alert.text)
driver.switch_to.alert.accept()
driver.close()
Node.js 예제
ChromeOptions의 setChromeBinaryPath를 사용하여 electron 애플리케이션의 경로를 지정합니다.
// https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const path = 'C:\\tool\\selenium\\chromedriver-v6.0.12-win32-x64\\chromedriver.exe';
const options = new chrome.Options();
// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Options.html
options.setChromeBinaryPath('C:\\dev\\node\\electronsample\\test-app-win32-x64\\test-app.exe');
const service = new chrome.ServiceBuilder(path).build();
chrome.setDefaultService(service);
(async () => {
const driver = await new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
.setChromeOptions(options)
.build();
await driver.findElement(webdriver.By.id("txt")).sendKeys("名前太郎");
await driver.findElement(webdriver.By.id("btn")).click();
let alert = await driver.switchTo().alert();
console.log(await alert.getText());
await alert.accept();
driver.quit();
})();
결과
UiPath로 작업하는 경우
Chrome을 사용하는 경우 브라우저 확장 프로그램과 함께 작동했지만 Electron의 경우 브라우저의 확장 프로그램을 사용할 수 없습니다.
어디까지나 Windows의 화면으로서 조작하기 때문에, 간단한 텍스트 입력이나 버튼 클릭은 문제 없습니다만, JavaScript의 실행등은 불가능하다고 생각됩니다.
※ 어쨌든 시도해보고 텍스트 입력이나 버튼 클릭은 할 수 있었지만, JS 스크립트 삽입은 실패했다.
요약
Electron에서 작성한 화면은 Selenium을 이용하여 브라우저의 자동 조작과 마찬가지로 자동 조작을 할 수 있습니다.
하지만 WebDriver는 Electron용을 사용합니다.
Reference
이 문제에 관하여(Electron으로 만든 화면의 자동 조작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mima_ita/items/32265ea071d291c750ed
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
from selenium import webdriver
from selenium.webdriver.support.ui import Select
options = webdriver.ChromeOptions()
options.binary_location = 'C:\\dev\\node\\electronsample\\test-app-win32-x64\\test-app.exe'
print(options.binary_location)
# 使用しているElectronのVersionにあうWebDriverを入手すること！！！
# https://github.com/electron/electron/releases?after=v7.0.0-beta.6
driver = webdriver.Chrome("C:\\tool\\selenium\\chromedriver-v6.0.12-win32-x64\\chromedriver.exe", options=options)
#
driver.find_element_by_id("txt").send_keys("名前太郎")
driver.find_element_by_id("btn").click()
print(driver.switch_to.alert.text)
driver.switch_to.alert.accept()
driver.close()
// https://seleniumhq.github.io/selenium/docs/api/javascript/index.html
const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const path = 'C:\\tool\\selenium\\chromedriver-v6.0.12-win32-x64\\chromedriver.exe';
const options = new chrome.Options();
// https://seleniumhq.github.io/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Options.html
options.setChromeBinaryPath('C:\\dev\\node\\electronsample\\test-app-win32-x64\\test-app.exe');
const service = new chrome.ServiceBuilder(path).build();
chrome.setDefaultService(service);
(async () => {
const driver = await new webdriver.Builder()
.withCapabilities(webdriver.Capabilities.chrome())
.setChromeOptions(options)
.build();
await driver.findElement(webdriver.By.id("txt")).sendKeys("名前太郎");
await driver.findElement(webdriver.By.id("btn")).click();
let alert = await driver.switchTo().alert();
console.log(await alert.getText());
await alert.accept();
driver.quit();
})();
Chrome을 사용하는 경우 브라우저 확장 프로그램과 함께 작동했지만 Electron의 경우 브라우저의 확장 프로그램을 사용할 수 없습니다.
어디까지나 Windows의 화면으로서 조작하기 때문에, 간단한 텍스트 입력이나 버튼 클릭은 문제 없습니다만, JavaScript의 실행등은 불가능하다고 생각됩니다.
※ 어쨌든 시도해보고 텍스트 입력이나 버튼 클릭은 할 수 있었지만, JS 스크립트 삽입은 실패했다.
요약
Electron에서 작성한 화면은 Selenium을 이용하여 브라우저의 자동 조작과 마찬가지로 자동 조작을 할 수 있습니다.
하지만 WebDriver는 Electron용을 사용합니다.
Reference
이 문제에 관하여(Electron으로 만든 화면의 자동 조작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/mima_ita/items/32265ea071d291c750ed
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Electron으로 만든 화면의 자동 조작), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mima_ita/items/32265ea071d291c750ed텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
