I tried just simply putting the ipcRenderer message inside of executeJavascript but it returned
ipcRenderer is not defined
my ipcRender is defined using window.ipcRenderer:
const { ipcRenderer, remote } = require('electron');
window.ipcRenderer = ipcRenderer;
//and then
remote.getCurrentWebContents().executeJavaScript(`settingsDiv.addEventListener('click', function() { ipcRenderer.send('test','ayy'); } );`)
This is loaded as a preloaded script for a webpage.
There is no need to take that path on a preload.
Something like this should work instead:
const { ipcRenderer } = require('electron');
document.addEventListener('DOMContentLoaded', (event) => {
const settingsDiv = document.querySelector('<?>'); // replace <?> with your selector for that div element
settingsDiv.addEventListener('click', () => {
ipcRenderer.send('test', 'ayy');
});
}
(the preload runs first, then the page is rendered. So we have to wait until the DOM content is loaded and the div is available)
Related
I'm new to electron, a piece of code in the electron tutorial code puzzles me, it should be simple, but I did not find any documentation or article that explains why it's possible.
With context isolation enabled, it is possible to update DOM by setting innerText property of an element.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
It seems impossible to me because Electron documentation says
parameters, errors and return values are copied when they are sent over the bridge
To find out why, I tried to expose a function setElementText into the "main world".
// preload.js
const {contextBridge} = require('electron')
// ...
contextBridge.exposeInMainWorld('bridgeTest', {
setElementText: (element, text) => {
window.abc = 123 // executed in isolated world, won't work
element.innerText = text
}
})
In render.js, call exposed function setElementText.
Execution of this function is proxied so that the body of the function is executed in the "isolated world", I know it because trying to set window.abc, but later in devtools of the window, console.log(window.abc) prints undefined.
Also, if a normal object is passed to setElementText, its innerText property remain unchanged, a similar function setElementText2 defined in the "main world" can change innerText property of the same object.
const setElementText2 = (element, text) => {
element.innerText = text
}
window.addEventListener('DOMContentLoaded', () => {
window.def = 456 // executed in the main world, works
const o = {innerText: 'xyz'}
window.bridgeTest.setElementText(o, 'xxyyzz')
console.log(o.innerText) // xyz
setElementText2(o, 'aabbcc')
console.log(o.innerText) // aabbcc
})
If a DOM element is passed to the exposed setElementText, its innerText property does change, so does the DOM content
window.addEventListener('DOMContentLoaded', () => {
window.def = 456 // executed in main world, works
const helloElement = document.getElementById('hello')
window.bridgeTest.setElementText(
helloElement, 'Hello World')
console.log(helloElement.innerText) // Hello World
})
All source code:
main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
preload.js
const {contextBridge} = require('electron')
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
contextBridge.exposeInMainWorld('bridgeTest', {
setElementText: (element, text) => {
window.abc = 123 // executed in isolated world, won't work
element.innerText = text
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'">
<link href="./styles.css" rel="stylesheet">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
<p id="hello">abcdefg</p>
<!-- You can also require other files to run in this process -->
<script src="./renderer.js"></script>
</body>
</html>
render.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// No Node.js APIs are available in this process because
// `nodeIntegration` is turned off. Use `preload.js` to
// selectively enable features needed in the rendering
// process.
const setElementText2 = (element, text) => {
element.innerText = text
}
window.addEventListener('DOMContentLoaded', () => {
const helloElement = document.getElementById('hello')
window.def = 456 // executed in main world, works
window.bridgeTest.setElementText(
helloElement, 'Hello World')
console.log(helloElement.innerText) // Hello World
const o = {innerText: 'xyz'}
window.bridgeTest.setElementText(o, 'xxyyzz')
console.log(o.innerText) // xyz
setElementText2(o, 'aabbcc')
console.log(o.innerText) // aabbcc
})
style.css
/* styles.css */
/* Add styles here to customize the appearance of your app */
I'm attempting to use playwright to automate an electron js application, but I can't seem to find any relevant information. To automate a simple programme, I used playwright:- https://playwright.dev/docs/api/class-electron and https://www.electronjs.org/docs/latest/tutorial/quick-start. However, I am unable to obtain the elements (buttons, dropdowns, and so on) in the electron application. Any reference or documentation that will deeply guide me to automate desktop application using playwright.
I got mine to work using their intro guide
for me since the installer installs additional components, i had to build and install, then supply the path to the exe
in my package.json i have.
"playwright": "^1.25.0",
"#playwright/test": "^1.25.0",
"eslint-plugin-playwright": "^0.10.0",
I created this class to help me have a cleaner code.
import { _electron as electron, ElectronApplication, Page } from 'playwright';
class ElectronAppController {
static electronApp: ElectronApplication;
static window1: Page;
static window2: Page;
static window3: Page;
static async launchApp() {
ElectronAppController.electronApp = await electron.launch({
executablePath: 'C:\\pathTo\\app.exe',
});
ElectronAppController.electronApp.on('window', async (page) => {
ElectronAppController.assignWindows(page);
});
const mywindows: Page[] =
await ElectronAppController.electronApp.windows();
for (
let index = 0, l = mywindows.length;
index < l;
index += 1
) {
ElectronAppController.assignWindows(
mywindows[index]
);
}
}
private static assignWindows(page: Page) {
const myurl = path.basename(page.url());
if (myurl === 'window1.html') {
ElectronAppController.window1= page;
}
if (myurl === 'window2.html') {
ElectronAppController.window2= page;
}
if (myurl === 'window3.html') {
ElectronAppController.window3= page;
}
return true;
}
}
the test file name should be [name].spec.ts, don't forget to import
test.describe('First Window Tests', async () => {
test.beforeAll(async () => {
await ElectronAppController.launchApp();
});
test('Check if first window opened', didLaunchApp);
test('name of the test', async () => {
// test body
// this will allow you to record a test very useful, but sometimes it has some problems check note bellow
await ElectronAppController.window1.pause;
});
test.afterAll(async () => {
await ElectronAppController.electronApp.close();
});
});
here is a didLaunchApp just as a simple test
const didLaunchApp = async () => {
const isVisible: boolean = await ElectronAppController.electronApp.evaluate(
async ({ BrowserWindow }) => {
const mainWindow = BrowserWindow.getAllWindows()[0];
const getState = () => mainWindow.isVisible();
return new Promise((resolve) => {
if (mainWindow.isVisible()) {
resolve(getState());
} else {
mainWindow.once('ready-to-show', () => {
setTimeout(() => resolve(getState()), 0);
});
}
});
}
);
await expect(isVisible).toBeTruthy();
};
you can record tests but sometimes that might make some problems if you have some popups or other effects on hovering over an element,
you can read more about selectors here
I'm just finishing a series of e2e tests using the same as you, Electron with React. What you don't see? Does it at least load the application?
Share the code of one test and how you launch using .launch method.
I'm attempting to implement windows auto update functionality in an electron app (which may lead to my early death) and I'm getting this error.
This is the URL I'm passing for testing purposes
EDIT: my electron app is using the two package.json structure and this code is in my app>main.js file
const feedURL = 'C:\\Users\\p00009970\\Desktop\\update_test';
autoUpdater.setFeedURL(feedURL);
autoUpdater.checkForUpdates();
EDIT2: Thanks to #JuanMa, I was able to get it working. Here is the code.
// auto update functionality
const {autoUpdater} = require('electron')
// local file system example: const feedURL = 'C:\\Users\\john\\Desktop\\updates_folder';
// network file system example: const feedURL = '\\\\serverName\\updates_folder';
const feedURL = '\\\\serverName\\updates_folder';
app.on('ready', () => {
autoUpdater.setFeedURL(feedURL);
// auto update event listeners, these are fired as a result of autoUpdater.checkForUpdates();
autoUpdater.addListener("update-available", function(event) {
});
autoUpdater.addListener("update-downloaded", function(event, releaseNotes, releaseName, releaseDate, updateURL) {
//TODO: finess this a tad, as is after a few seconds of launching the app it will close without warning
// and reopen with the update which could confuse the user and possibly cause loss of work
autoUpdater.quitAndInstall();
});
autoUpdater.addListener("error", function(error) {
});
autoUpdater.addListener("checking-for-update", function(event) {
});
autoUpdater.addListener("update-not-available", function(event) {
});
// tell squirrel to check for updates
autoUpdater.checkForUpdates();
})
Are you including the autoUpdater module correctly?
const {autoUpdater} = require('electron')
If so try to execute the code after the app 'ready' event.
app.on('ready', () => {
const feedURL = 'C:\\Users\\p00009970\\Desktop\\update_test';
autoUpdater.setFeedURL(feedURL);
autoUpdater.checkForUpdates();
})
I'm tracking events in a web page using RxJs and sending them through buffer.
I emit a buffer on unload event, but it's done after the event is triggered, so it's never triggered.
Is there a way to generate everything related to my buffer on unload ?
/* globals $ */
import { Observable } from 'rx-dom'
import { Load, Unload } from './events'
$(function () {
const load$ = (new Load()).observer$() // triggered on page load
const unload$ = (new Unload()).observer$() // triggered on page unload
const source$ = Observable.merge(load$, unload$)
const intervalBetween = 5000
const dummyStart$ = Observable.return({})
const bufferizeEvents$ = [submit$, unload$]
const opening$ = dummyStart$
.concat.apply(dummyStart$, bufferizeEvents$)
.flatMapLatest(x => Observable.timer(0, intervalBetween))
.skip(1)
const buffers$ = source$.buffer(opening$)
buffers$.subscribe(buffer => {
if (buffer.length) {
// some ajax call
// this is never reached on page unload
}
})
})
Are there any events fired by an element to check whether a css3 transition has started or end?
W3C CSS Transitions Draft
The completion of a CSS Transition generates a corresponding DOM Event. An event is fired for each property that undergoes a transition. This allows a content developer to perform actions that synchronize with the completion of a transition.
Webkit
To determine when a transition completes, set a JavaScript event listener function for the DOM event that is sent at the end of a transition. The event is an instance of WebKitTransitionEvent, and its type is webkitTransitionEnd.
box.addEventListener( 'webkitTransitionEnd',
function( event ) { alert( "Finished transition!" ); }, false );
Mozilla
There is a single event that is fired when transitions complete. In Firefox, the event is transitionend, in Opera, oTransitionEnd, and in WebKit it is webkitTransitionEnd.
Opera
There is one type of transition event
available. The oTransitionEnd event
occurs at the completion of the
transition.
Internet Explorer
The transitionend event occurs at the completion of the transition. If the transition is removed before completion, the event will not fire.
Stack Overflow: How do I normalize CSS3 Transition functions across browsers?
Update
All modern browsers now support the unprefixed event:
element.addEventListener('transitionend', callback, false);
https://caniuse.com/#feat=css-transitions
I was using the approach given by Pete, however I have now started using the following
$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd',
function() {
//do something
});
Alternatively if you use bootstrap then you can simply do
$(".myClass").one($.support.transition.end,
function() {
//do something
});
This is becuase they include the following in bootstrap.js
+function ($) {
'use strict';
// CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/)
// ============================================================
function transitionEnd() {
var el = document.createElement('bootstrap')
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'transition' : 'transitionend'
}
for (var name in transEndEventNames) {
if (el.style[name] !== undefined) {
return { end: transEndEventNames[name] }
}
}
return false // explicit for ie8 ( ._.)
}
$(function () {
$.support.transition = transitionEnd()
})
}(jQuery);
Note they also include an emulateTransitionEnd function which may be needed to ensure a callback always occurs.
// http://blog.alexmaccaw.com/css-transitions
$.fn.emulateTransitionEnd = function (duration) {
var called = false, $el = this
$(this).one($.support.transition.end, function () { called = true })
var callback = function () { if (!called) $($el).trigger($.support.transition.end) }
setTimeout(callback, duration)
return this
}
Be aware that sometimes this event doesn’t fire, usually in the case
when properties don’t change or a paint isn’t triggered. To ensure we
always get a callback, let’s set a timeout that’ll trigger the event
manually.
http://blog.alexmaccaw.com/css-transitions
All modern browsers now support the unprefixed event:
element.addEventListener('transitionend', callback, false);
Works in the latest versions of Chrome, Firefox and Safari. Even IE10+.
In Opera 12 when you bind using the plain JavaScript, 'oTransitionEnd' will work:
document.addEventListener("oTransitionEnd", function(){
alert("Transition Ended");
});
however if you bind through jQuery, you need to use 'otransitionend'
$(document).bind("otransitionend", function(){
alert("Transition Ended");
});
In case you are using Modernizr or bootstrap-transition.js you can simply do a change:
var transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd otransitionend',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];
You can find some info here as well http://www.ianlunn.co.uk/blog/articles/opera-12-otransitionend-bugs-and-workarounds/
Just for fun, don't do this!
$.fn.transitiondone = function () {
return this.each(function () {
var $this = $(this);
setTimeout(function () {
$this.trigger('transitiondone');
}, (parseFloat($this.css('transitionDelay')) + parseFloat($this.css('transitionDuration'))) * 1000);
});
};
$('div').on('mousedown', function (e) {
$(this).addClass('bounce').transitiondone();
});
$('div').on('transitiondone', function () {
$(this).removeClass('bounce');
});
If you simply want to detect only a single transition end, without using any JS framework here's a little convenient utility function:
function once = function(object,event,callback){
var handle={};
var eventNames=event.split(" ");
var cbWrapper=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
callback.apply(this,arguments);
};
eventNames.forEach(function(e){
object.addEventListener(e,cbWrapper,false);
});
handle.cancel=function(){
eventNames.forEach(function(e){
object.removeEventListener(e,cbWrapper, false );
});
};
return handle;
};
Usage:
var handler = once(document.querySelector('#myElement'), 'transitionend', function(){
//do something
});
then if you wish to cancel at some point you can still do it with
handler.cancel();
It's good for other event usages as well :)