I have a web-page with set of 'li' elements. I need to make screenshots for each 'li' element and save it to a new files.
I'm trying to use nightmare-screenshot-selector for it.
But I get a few files with the same screenshot but with different names (from my array).
Here is my code.
const Nightmare = require('nightmare');
const fs = require('fs');
const screenshotSelector = require('nightmare-screenshot-selector');
Nightmare.action('screenshotSelector', screenshotSelector);
function savePicture(picture) {
picture = ['v1', 'v2', 'v3'];
let browser = Nightmare({
show: false,
webPreferences: {
partition: 'nopersist'
}
});
browser
.goto('https://www.google.com')
picture.forEach(v => {
browser
.wait(7000)
.screenshotSelector(`li[class="${v}"]`)
.then(function (data) {
fs.writeFileSync(`img/${v}.png`, data)
})
.catch((error) => {
console.log('Error loading the page', error)
})
})
browser.end();
}
I inserted a .end() call, works for me. Slightly modified code, grabs two regions of Google home page:
function savePicture(picture) {
picture = ['div#hplogo', 'div.tsf-p'];
let browser = Nightmare({
show: false,
webPreferences: {
partition: 'nopersist'
}
});
browser
.goto('https://www.google.com')
picture.forEach(v => {
browser
.wait(2000)
.screenshotSelector(v)
.then(function (data) {
fs.writeFileSync(`img/${v}.png`, data)
})
.then(()=> {
browser.end();
})
.catch((error) => {
console.log('Error loading the page', error)
})
})
}
Related
I would like to use the react-to-print library to print an iframe from my Electron app. How can I use the iframe reference to get the correct window/element to print?
const handleElectronPrint = async (target: HTMLIFrameElement) {
// Instead of this (printing the whole page)
// let win = BrowserWindow.getFocusedWindow();
// How do I print just the referenced iframe?
// `target` iframe has id="printWindow", how to select it?
let win = BrowserWindow.getMyIframe();
// Is this the right way to do the print once we have the iframe?
const options = { printBackground: true };
win.webContents.print(options, (success, failureReason) => {
if (!success) console.log(failureReason);
console.log('Print Initiated');
});
};
<ReactToPrint
...
print={handleElectronPrint}
/>
You need to convert the iframe object to Data URL. And load the URL in a new hidden BrowserWindow object.
Build data URL in Renderer process and send the URL to Main process using preload. In main process do the BrowserWindow.loadURL and printing.
App.js
// Send print request to the Main process
this.handlePrint = function (target) {
return new Promise(() => {
console.log('forwarding print request to the main process...');
// convert the iframe into data url
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
let data = target.contentWindow.document.documentElement.outerHTML;
//console.log(data);
var blob = new Blob([data], { type: 'text/html' });
var url = URL.createObjectURL(blob);
window.electronAPI.printComponent(url, (response) => {
console.log('Main: ', response);
});
});
};
main.js
// List of all options at -
// https://www.electronjs.org/docs/latest/api/web-contents#contentsprintoptions-callback
const printOptions = {
silent: false,
printBackground: true,
color: true,
margin: {
marginType: 'printableArea',
},
landscape: false,
pagesPerSheet: 1,
collate: false,
copies: 1,
header: 'Page header',
footer: 'Page footer',
};
ipcMain.handle('printComponent', (event, url) => {
let win = new BrowserWindow({ show: false });
win.loadURL(url);
win.webContents.on('did-finish-load', () => {
win.webContents.print(printOptions, (success, failureReason) => {
console.log('Print Initiated in Main...');
if (!success) console.log(failureReason);
});
});
return 'done in main';
});
preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
printComponent: async (url, callback) => {
let response = await ipcRenderer.invoke('printComponent', url);
callback(response);
},
});
Here is the list of all print options. Some options like page size, margins, orientation can be set in CSS #page rule refer App.css in my demo app.
Here is demo app on GitHub electron-react-to-print-demo.
Print Preview: There is no, Chrome browser style, inbuilt print preview feature due to these reasons. We need to implement our own workaround. Like print to PDF and show pdf in new window:
//handle preview
ipcMain.handle('previewComponent', (event, url) => {
let win = new BrowserWindow({ title: 'Preview', show: false, autoHideMenuBar: true });
win.loadURL(url);
win.webContents.once('did-finish-load', () => {
win.webContents.printToPDF(printOptions).then((data) => {
let buf = Buffer.from(data);
var data = buf.toString('base64');
let url = 'data:application/pdf;base64,' + data;
win.webContents.on('ready-to-show', () => {
win.show();
win.setTitle('Preview');
});
win.webContents.on('closed', () => win = null;);
win.loadURL(url);
})
.catch((error) => {
console.log(error);
});
});
return 'shown preview window';
});
I've added above preview feature in electron-react-to-print-demo.
I'm using javascript scripting with a legacy version of iMacros (v8.9.7)
And I'm a bit confused about getting fingerprinting JS to work properly.
My use case :
1- load fingerprintingJS from CDN asynchronously
2- store the visitorID into variable
My code :
Components.utils.import("resource://gre/modules/Promise.jsm");
Components.utils.import("resource://gre/modules/devtools/Console.jsm");
function initFingerprintJS() {
FingerprintJS.load()
.then(fp => fp.get())
.then(result => {
const visitorId = result.visitorId;
window.console.log(visitorId);
});
}
const loadScript = (src, async = true, type = "text/javascript") => {
return new Promise((resolve, reject) => {
try {
const el = window.document.createElement("script");
const container = window.document.head || window.document.body;
el.type = type;
el.async = async;
el.src = src;
el.addEventListener("load", () => {
resolve({ status: true });
});
el.addEventListener("error", () => {
reject({
status: false,
message: `Failed to load the script ${src}`
});
});
container.appendChild(el);
} catch (err) {
reject(err);
}
});
};
function get_fingerprint() {
loadScript("https://cdn.jsdelivr.net/npm/#fingerprintjs/fingerprintjs#3/dist/fp.min.js")
.then((data) => {
window.console.log("Script loaded successfully", data);
initFingerprintJS();
})
.catch((err) => {
window.console.error(err);
});
}
<button onclick="get_fingerprint()">FINGERPRINT</button>
when I remove the two Components imports and run the bit of script in the console, everything works. But when it's from iMacros interface, it generates errors
GET
https://cdn.jsdelivr.net/npm/#fingerprintjs/fingerprintjs#3/dist/fp.min.js
[HTTP/2.0 200 OK 0 ms] Script loaded successfully Object { status:
true } ReferenceError: FingerprintJS is not defined Trace de la pile :
initFingerprintJS#resource://gre/modules/RemoteAddonsParent.jsm:1102:5
get_fingerprint/<#resource://gre/modules/RemoteAddonsParent.jsm:1142:9
Handler.prototype.process#resource://gre/modules/Promise.jsm ->
resource://gre/modules/Promise-backend.js:932:23
this.PromiseWalker.walkerLoop#resource://gre/modules/Promise.jsm ->
resource://gre/modules/Promise-backend.js:813:7
this.PromiseWalker.scheduleWalkerLoop/<#resource://gre/modules/Promise.jsm
-> resource://gre/modules/Promise-backend.js:747:11
Any helps please
I'm new here on the site, and new to React.
I built a function that works great in nodejs. There are rare cases where I want to run this function according to the parameters I send it to, so I try to send it the parameters but I think I can not, I try to print it - and I do not get a print of the parameters I want to send.
i run the function throw click at buttom in react:
<Button onClick={() => {
const result = [1,2,3,4,5,"test"];
props.makeMatchVer2(result);
}}>
make match ver2
</Button>
the action I'm run in axios:
export const makeMatchVer2 = (data) => (dispatch) => {
dispatch({ type: LOADING_DATA });
axios
.get('/kmeans', {
params: {
filterArray: data
}
})
.then((res) => {
dispatch({
type: MAKE_MATCH,
payload: res.data
});
})
.catch((err) => {
dispatch({
type: MAKE_MATCH,
payload: []
});
});
};
the function I'm build in nodeJS:
exports.addUserKmeansMatch = (req, res) => {
console.log("addUserKmeansMatch function start:");
console.log(req.data);
if(req.params)
{
console.log(req.params);
}
let userIndex = 0;
let engineers = [];
let engineersHandles = [];
let engineerDetailsNumeric = {};
db.collection("preferences").get().then(querySnapshot => {
querySnapshot.forEach(doc => {
const engineerDetails = doc.data();
if (engineerDetails.handle === req.user.handle) {
engineersHandles.unshift(engineerDetails.handle);
delete engineerDetails.handle;
engineerDetailsNumeric = convertObjectWithStrToNumber(engineerDetails);
engineers.unshift(engineerDetailsNumeric);
}
else {
engineersHandles.push(engineerDetails.handle);
delete engineerDetails.handle;
engineerDetailsNumeric = convertObjectWithStrToNumber(engineerDetails);
engineers.push(engineerDetailsNumeric);
}
});
kmeans.clusterize(engineers, { k: 4, maxIterations: 5, debug: true }, (err, result) => {
if (err) {
console.error(err);
return res.status(500).json({ error: err.code });
} else {
const cluster = result.clusters;
let foundedMatches = GetUserSerialGroup(userIndex, [...cluster], [...engineers]);
let foundedMatchesHandle = GetUserSerialGroupHandle(userIndex, [...cluster], [...engineersHandles]);
let totalTest = {
foundedMatches: foundedMatches,
foundedMatchesHandle: foundedMatchesHandle,
cluster: cluster,
engineersHandles: engineersHandles,
engineers: engineers
};
let userMatchHandle = reduceUserMatchHandle(foundedMatchesHandle);
userMatchHandle.handle = req.user.handle;
db.doc(`/match/${req.user.handle}`)
.set(userMatchHandle)
.then(() => {
return res.json({ message: "Details added successfully" });
})
.catch((err) => {
console.error(err);
return res.status(500).json({ error: err.code });
});
}
})
})
};
Through the button, I send parameters to the function, but I do not see their print, probably something does not work, but I do not know why, I'm new to it
makeMatchVer2 is a thunk. You should call it with dispatch: dispatch(props.makeMatchVer2(result))
The code is correct, I accidentally sent the wrong object, I have 2 objects with almost identical names, one array and the other an object. And I accidentally sent the object instead of the array, it's working right now, thank you.
I have react-native 0.44.0 and react-native-fbsdk 0.5.0. ShareDialog component work fine, but due to lack of docs explanation had been totally stuck. I have app with own API. I make API call fetch sharing template with photos array.
.then((responseData) => {
console.log("Facebook Share Api Test")
console.log(responseData)
// After receiving result checking Platform
// If this is iOS we should let our result image links be fetched to encode it in Base64.
if(Platform.OS !== 'android'){
console.log("Not Andro!d!")
let imgUrl
let sharePhotoContent
let iteratePhotos = function (data) {
var photoInfo = [];
var ready = Promise.resolve(null)
data.forEach(function (value, i) {
let iconURL = API.SERVER_URL + API.SERVICE_PORT + API.HEAD_ICON_RES_URL + value.photo_id + 'S'
ready = ready.then(function () {
return RNFetchBlob
.fetch('GET', iconURL)
.then(res => res.data)
.then(resData => {
imgUrl = 'data:image/jpeg;base64,' + resData
console.log(imgUrl)
return imgUrl
})
.then(img => {
console.log(img)
let res = {
imageUrl: img,
userGenerated: true,
caption: value.comment
}
return res
})
.catch(err => {
console.log(err)
})
}).then(function (resData) {
photoInfo[i] = resData;
});
});
return ready.then(function () { return photoInfo; });
}
iteratePhotos(responseData.photos).then((res) => {
console.log('res', res)
if(res.length > 0){
sharePhotoContent = {
contentType: 'photo',
contentDescription: 'Wow, check out this great site!',
photos: res
}
} else {
sharePhotoContent = {
contentType: 'link',
contentUrl: 'some url',
message: responseData.message
}
}
ShareDialog.canShow(sharePhotoContent)
.then((canShow) => {
if (canShow) {
return ShareDialog.show(sharePhotoContent);
}
})
.then((result) => {
this.setState({isshowIndicator: false})
if(!result.isCancelled){
this.setState({isFacebookShared: true})
setTimeout(() => alert("Success!"), 100)
}
})
.catch(error => {
this.setState({isshowIndicator: false})
console.log(error)
setTimeout(() => alert('Share fail with error: ' + error), 100)
}
)
})
} else {
let photoInfo = responseData.photos.map(value => {
return {
imageUrl: API.SERVER_URL + API.SERVICE_PORT + API.HEAD_ICON_RES_URL + value.photo_id + 'S',
...value
}
})
console.log(photoInfo, "It IS ANDROID")
if(responseData.photos.length > 0){
var sharePhotoContent = {
contentType: 'photo',
photos: photoInfo
}
} else {
var sharePhotoContent = {
contentType: 'link',
contentUrl: 'some url',
message: responseData.message
}
}
ShareDialog.canShow(sharePhotoContent)
.then((canShow) => {
if (canShow) {
return ShareDialog.show(sharePhotoContent);
}
})
.then((result) => {
this.setState({isshowIndicator: false})
if(!result.isCancelled){
this.setState({isFacebookShared: true})
setTimeout(() => alert("Success!"), 100)
}
})
.catch(error => {
this.setState({isshowIndicator: false})
setTimeout(() => alert('Share fail with error: ' + error), 100)
})
}
})
When I tap share, sharedialog opens and photos that I want are pasted but message line waits to be filled
But I need into ShareDialog opened:
Photos needed to be attached;
Message to be prefilled according that one I received from my API.
Is this possible? Please help this is prerelease feature needed to be implemented very fast and I havent any idea how((
Attaching screenshots that describes 1. what is going now here? 2. What i want to do.
some social network like facebook does not support pre-filling the message for users as seen in their Policy: https://developers.facebook.com/policy/#socialplugins
So I have this nightmarejs code I would like to execute(open new window and run the script) when you click a button inside an electron app. However I searched through the internet and nothing worked for me :/ (I have a mac)
var Nightmare = require('nightmare');
var nightmare = Nightmare({
electronPath: require('${__dirname}/node_modules/electron'),
show: true
});
nightmare
.goto('http://yahoo.com')
.type('form[action*="/search"] [name=p]', 'github nightmare')
.click('form[action*="/search"] [type=submit]')
.wait('#main')
.evaluate(function () {
return document.querySelector('#main .searchCenterMiddle li a').href
})
.end()
.then(function (result) {
document.getElementById("results").innerHTML = result;
})
.catch(function (error) {
console.error('Search failed:', error);
});
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
title: "Dummy",
fullscreenable: false,
resizable: false,
alwaysOnTop: false,
width: 420,
height: 250,
'web-preferences': {
'web-security': false
}
})
mainWindow.loadURL(`file://${__dirname}/index.html`)
mainWindow.on('closed', function() {
mainWindow = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', function() {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function() {
if (mainWindow === null) {
createWindow()
}
})
Thanks,
Bertram
I don't see anything that will fire off the code you want to run.
If you gave it to me to make work, I'd do two things:
wrap the nightmare code in a function so you can
require("./mynighmare.js").sleepPoorly()
in your index.html, add a button that calls the above line to actually run your code.
... then I'd do a whole bunch of testing, because my first draft wouldn't work right :)