I have code to create a download link for dynamicly created data. It works except that I want the filename to be .env I can download a file called env or config.env but not plain .env is this a browser restriction?
function fileDownload(data: string, fileName: string, mimeType: string) {
const dataStr = `data:${mimeType};charset=utf-8,${encodeURIComponent(
data
)}`;
const downloadAnchorNode = document.createElement('a');
downloadAnchorNode.setAttribute('href', dataStr);
downloadAnchorNode.setAttribute('download', fileName);
document.body.appendChild(downloadAnchorNode); // required for firefox
downloadAnchorNode.click();
downloadAnchorNode.remove();
}
export function plainFileDownload(data: string, fileName: string) {
fileDownload(data, fileName, 'application/x-empty');
}
textFileDownload('some dynamic text', '.env'); // Called on button click
Whether the access to dot files is restricted or not really depends on your server config.
It is unclear from the question what is your server config or even what you use on server-side.
In my experience most of the tools/frameworks will not serve files/folders prefixed with a dot by default (for instance, express & Apache will not) however you can configure them to do so:
Check this if you use Express
Check this if you use Apache
Be sure that you know what you are doing. Dot-prefixed file are hidden by default because they tend to contain some sensitive information that you normally wouldn't like to share with everyone.
Related
I'm fairly new to Node, and am wracking my brains on how to achieve the following:
I have a config file that looks something like this:
// various es imports
export default {
input: {
index: 'src/index.ts',
Button: 'src/Button/index.ts',
Spinner: 'src/Spinner/index.ts',
'icons/Notification': 'src/_shared/components/icons/Notification.tsx',
'icons/Heart': 'src/_shared/components/icons/Heart.tsx',
},
//.. other properties
}
From my node script, i need to somehow read this file and do the following:
Delete any entries in the input object that have a key starting
with icons/
Append new entries to the input object.
Write these changes back to the original config file.
Is there a recommended way to do this in Node, i've been looking at a couple of libs, like replace-in-file but none seem to be suited to this particular case.
Just faced the same concern, here is how I solved it :
1. Gets your file content
If it is not a .js file, then use fs.readFileSync (or fs.readFile) like so :
const fs = require('fs');
const path = require('path');
const myObjectAsString = fs.readFileSync(
path.join( process.cwd(), 'my-file.txt' ), // use path.join for cross-platform
'utf-8' // Otherwise you'll get buffer instead of a plain string
);
// process myObjectAsString to get it as something you can manipulate
Here I am using process.cwd(), in case of a CLI app, it will gives you the current working directory path.
If it is a .js file (eg. a JavaScript config file like webpack.config.js for instance), then simply use require native function, as you would do with regular internal file or NPM module, and you will get all module.export content :
const path = require('path');
const myObject = require( path.join( process.cwd(), 'myFile.js') );
2. Modify your object as you want
// ...
myObject.options.foo = 'An awesome option value';
3. Then rewrite it back to the file
You can simply use fs.writeFileSync to achieve that :
// ...
fs.writeFileSync( path.join(process.cwd(), 'my-file.txt', myObject );
If you want to write a plain JavaScript Object, then you can use util.inspect() native method and you may also use fs.appendFileSync :
// ...
// If we wants to adds the 'module.exports = ' part before
fs.writeFileSync( process.cwd() + '/file.js', 'module.exports = ');
// Writes the plain object to the file
fs.appendFileSync( process.cwd() + '/file.js', util.inspect(options));
Is it possible to change the icon of any application on macOS with NodeJS...
I've been searching for a bit but I've been unable to find anything useful.
Much like dragging a .icns file onto the icon in the "Get Info" menu for any app but instead with NodeJS .
You just need to replace the icon file inside the app.
Treat the app as a folder, look for the Info.plist file in the app inside its Contents folder.
In the Info.plist file (it's an xml file) look for the CFBundleIconFile key. It's value is the icon file for the app.
Here you have two choices - you can either:
3a. replace this value with your icon or
3b. just replace the icon file with your own icon with the same name.
Here's an example of replacing the icon file with another file with the same name:
const plist = require('simple-plist');
const path = require('path');
const fs = require('fs');
function (appPath, newIconFile) {
plist.readFile(path.join(appPath, 'Contents/Info.plist'), (err, data) => {
const iconName = path.join(appPath, 'Contents/Resources', data.CFBundleIconFile);
fs.copyFile(newIconFile, iconName, (err) => {
console.log('icon changed!');
});
});
}
The simple-plist library also supports saving the plist data back to disk so I will leave replacing the CFBundleIconFile value as an exercise for the reader.
We use environment variables within our angular app to read settings etc but is there a way to generate assets/files on build?
Basically we'd like to create an 'auth/settings.js' file in the assets folder containing client id's and apiUrl's unique to each environment. These will be used in the index.html (so outside of the angular app bootstrap )
e.g. the values in the environment.ts exported into a js / json file output to the assets folder so they can be read in index.html
export const environment = {
production: false,
title: 'default',
clientId: 'xxxx-xxxx-xxxx-xxxx-xxxx',
clientUrl: 'https://localhost:4200/app',
apiUrl: 'https://localhost/api'
};
I have read that you can use mulitapps:
https://github.com/angular/angular-cli/wiki/stories-multiple-apps
This may work but looks like a lot of copy and pasting and we'll have quite a few versions of the build - I'm not sure if you can declare the common settings once and just extend the extra app settings (inheritance)?
Thanks
What we are doing in our case is actually having an config.json and config.[env-name].json files in app/config folder that configured in project assets. The config.json file is getting fetched before angular bootstrap using browser Fetch API
On our build server we are just replacing the content of config.json withconfig.staging.json or config.prod.json based on environment build. Also we have AppSettings class that gets created on bootstrap. Here is how it is looks like:
fetch(configUrl, { method: 'get' })
.then((response) => {
response.json()
.then((data: any) => {
if (environment.production) {
enableProdMode();
};
platformBrowserDynamic([{ provide: AppSettings, useValue: new AppSettings(data.config) }]).bootstrapModule(AppModule);
});
});
UPDATE:
If you need to stick some values based on your env in to index.html you might need to consider doing that on your build server. You can rather string replace the values or you can have index.[env-name].thml files so you just overwrite the index.html based on environment build.
Also check out this issues
- https://github.com/angular/angular-cli/issues/7506
- https://github.com/angular/angular-cli/issues/3855
I want to know how I can verify if a file was downloaded using Selenium Webdriver after I click the download button.
Your question doesn't say whether you want to confirm it locally or remotely(like browserstack) . If it is remotely then my answer will be "NO" as you can see that the file is getting downloaded but you can not access the folder. So you wont be able to assert that the file has been downloaded.
If you want to achieve this locally(in Chrome) then the answer is "YES", you can do it something like this:
In wdio.conf.js(To know where it is getting downloaded)
var path = require('path');
const pathToDownload = path.resolve('chromeDownloads');
// chromeDownloads above is the name of the folder in the root directory
exports.config = {
capabilities: [{
maxInstances: 1,
browserName: 'chrome',
os: 'Windows',
chromeOptions: {
args: [
'user-data-dir=./chrome/user-data',
],
prefs: {
"download.default_directory": pathToDownload,
}
}
}],
And your spec file(To check if the file is downloaded or not ?)
const fsExtra = require('fs-extra');
const pathToChromeDownloads = './chromeDownloads';
describe('User can download and verify a file', () =>{
before(() => {
// Clean up the chromeDownloads folder and create a fresh one
fsExtra.removeSync(pathToChromeDownloads);
fsExtra.mkdirsSync(pathToChromeDownloads);
});
it('Download the file', () =>{
// Code to download
});
it('Verify the file is downloaded', () =>{
// Code to verify
// Get the name of file and assert it with the expected name
});
});
more about fs-extra : https://www.npmjs.com/package/fs-extra
Hope this helps.
TL;DR: Unless your web-app has some kind of visual/GUI trigger once the download finishes (some text, an image/icon-font, push-notification, etc.), then the answer is a resounding NO.
Webdriver can't go outside the scope of your browser, but your underlying framework can. Especially if you're using NodeJS. :)
Off the top of my head I can think of a few ways I've been able to do this in the past. Choose as applicable:
1. Verify if the file has been downloaded using Node's File System (aka fs)
Since you're running WebdriverIO, under a NodeJS environment, then you can make use its powerful lib tool-suite. I would use fs.exists, or fs.existsSync to verify if the file is in the expected folder.
If you want to be diligent, then also use fs.statSync in conjunction with fs.exists & poll the file until it has the expected size (e.g.: > 2560 bytes)
There are multiple examples online that can help you put together such a script. Use the fs documentation, but other resources as well. Lastly, you can add said script inside your it/describe statement (I remember your were using Mocha).
2. Use child_process's exec command to launch third-party scripts
Though this method requires more work to setup, I find it more relevant on the long run.
!!! Caution: Apart from launching the script, you need to write a script in a third-party framework.
Using an AutoIT script;
Using a Sikuli script;
Using a TestComplete (not linking it, I don't like it that much), or [insert GUI verification script here] script;
Note: All the above frameworks can generate an .exe file that you can trigger from your WebdriverIO test-cases in order to check if your file has been downloaded, or not.
Steps to take:
create one of the stand-alone scripts like mentioned above;
place the script's .exe file inside your project in a known folder;
use child_process.exec to launch the script and assert its result after it finishes its execution;
Example:
exec = require('child_process').exec;
// Make sure you also remove the .exe from scriptName
var yourScript = pathToScript + scriptName;
var child = exec(yourScript);
child.on('close', function (code, signal) {
if (code!==0) {
callback.fail(online.online[module][code]);
} else {
callback();
}
});
Finally: I'm sure there are other ways to do it. But, your main take-away from such a vague question should be: YES, you can verify if the file has been downloaded if you absolutely must, expecially if this test-case is CRITICAL to your regression-run.
I have some template files that contain a few variable strings each, I'd like to build a very simple input form with Electron (https://www.electronjs.org/) and I want to save the composed output file on the user's computer.
Is there any module I can use to let Electron save files locally?
If you are targeting multiple platforms, I answered a similar question here. Basically app.getPath(name), app.setPath(name, path), and app.getAppPath() are very useful in saving files to the the right place regardless of the OS.
You may also want to check out these Nodejs packages which help simplify saving files directly to the host machine...
fs-jetpack
graceful-fs
Node.js fs
If you intend for users to save files you might also have a look at the Dialog api where you can specifically invoke a save dialog for that purpose.
A sample code is :
const fs = require('fs');
try { fs.writeFileSync('myfile.txt', 'the text to write in the file', 'utf-8'); }
catch(e) { alert('Failed to save the file !'); }
You can of course store the file's name as well as the content's name in variables.
This will save the content in myfile.txt, which is located inside the current working directory (which you can get through process.cwd()). If you want to write, let's say in the user's home directory, you can use the app.getPath function.
const {dialog} = require('electron').remote;
var fs = require('fs');
export default {
methods: {
save: function () {
var options = {
title: "Save file",
defaultPath : "my_filename",
buttonLabel : "Save",
filters :[
{name: 'txt', extensions: ['txt']},
{name: 'All Files', extensions: ['*']}
]
};
dialog.showSaveDialog(null, options).then(({ filePath }) => {
fs.writeFileSync(filePath, "hello world", 'utf-8');
});
},
}
}