I am trying to use Phaserjs inside NW.js, but it is showing blank screen. While it is working ok in normal browser.
Can anyone help me with it.
Package.json
{
"name": "Phaser Drag",
"main": "phaser/index.html",
"window": {
"frame": true,
"toolbar": true,
"width": 800,
"height": 600
}
}
I got the answer.
Actually Inside NW.js, phaserjs canvas needs to have background color to be given explicitly.
Related
I made the mistake of following a youtube video to improve setup of VS code, after making the adjustments I always get the settings sync error message. I click on show error file, and highlights the editor.fontSize line. I cannot see anything wrong with it personally:
{
"workbench.colorTheme": "Cobalt2",
"security.workspace.trust.untrustedFiles": "open",
"window.zoomLevel": 1,
"liveServer.settings.donotShowInfoMsg": true,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable",
"html.format.indentInnerHtml": true,
"[css]": {
"editor.defaultFormatter": "michelemelluso.code-beautifier"
},
"sync.gist": "7aea226d700927d0abdecbd3c2260369",
"sync.autoDownload": true,
"sync.quietSync": true,
"liveSassCompile.settings.watchOnLaunch": true,
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css/style.css"
},
]
}
"editor.fontSize": 14,
"editor.tabSize": 2,
"editor.guides.bracketPairs": true,
"editor.guides.bracketPairsHorizontal": true,
"editor.wordWrap": "on",
"workbench.iconTheme": "vscode-icons"
I have tried uninstalling many many times and all my settings get restored and never go back to default. I have tried advice here as to making some changes from other peoples similar problems, but nothing seems to work. Any assistance would be greatly appreciated, this pops up any time I try to make a settings change also.
try to delete this section
"sync.gist": "7aea226d700927d0abdecbd3c2260369",
"sync.autoDownload": true,
"sync.quietSync": true,
In Windows 10 the taskbar is not showing my custom-made icon. I am using the latest (at the moment of writing) 0.51.1 version of nw.js and the taskbar icon always defaults doesn't matter what I am doing. Even though the .exe icon is changing on the build and behaves as expected.
Have anyone managed to solve this issue? I read almost all issues log on this topic on the official nw.js Github page but it doesn't help and seems like the issue still happens for some users.
here is my package.json file
{
"name": "com.domain.product",
"version": "0.1.0",
"build": {
"nwVersion": "0.51.1",
"nwFlavor": "normal",
"strippedProperties": [ "scripts", "devDependencies", "build", "chromium-args"],
"mac": {
"name": "Product Name",
"icon": "ProductName.icns"
},
"win": {
"name": "ProductName",
"icon": "icon/ProductName.ico"
},
"output": "../build"
},
"window": {
"width": 314,
"height": 660,
"frame": false,
"transparent": true,
"toolbar": false,
"resizable": false
},
"main": "index.html",
"node-remote": [ "<all_urls>"]
}
Here is a more complex example, but look for how icons are handled in the the window setting and in the build settings:
https://github.com/nwutils/nw-vue-cli-example/blob/master/package.json
You need to add the 'window.icon' property to your package.json. Something similar to:
"window": {
"icon": "./build/my-icon.png"
},
See the Manifest format documentation for more details: https://nwjs.readthedocs.io/en/latest/References/Manifest%20Format/#icon
I am using Cypress5.0. I have configured the screenshots folder in cypress.json.
And I am running tests using cypress runner API programmatically.
I am using viewport values as :
config.viewportWidth = 1080;
config.viewportHeight = 1024;
The screenshot is coming, but it is not on the full page. My web page has scrolling, the screenshot is taking only visible area.
Please guide how to take full-page screen.
My Cypress.json
{
"projectId": "yvs41u",
"video": false,
"integrationFolder": "integration-tests/experiences",
"testFiles": "**/*.js",
"fixturesFolder": false,
"pluginsFile": "plugins/index.js",
"supportFile": "support/index.js",
"screenshotsFolder": "build/reports",
"videosFolder": "build/reports",
"videoUploadOnPasses": false,
"trashAssetsBeforeRuns": false,
"reporter": "mochawesome",
"chromeWebSecurity": false,
"reporterOptions": {
"charts": true,
"html": false,
"json": true,
"reportDir": "cypress/reports/mochawesome",
"reportTitle": "Archie Integration Testing Suite",
"reportFilename": "report",
"overwrite": false,
"inline": true,
"inlineAssets": true,
"timestamp": "dd-mmm-yyyy-HH-MM-ss"
}
}
Cypress by default captures only a viewport. In order to screenshot the whole page you need to configure the screenshot first:
Cypress.Screenshot.defaults({ capture: 'fullPage' });
cy.screenshot();
As a result whole page will be captured.
Further read: https://docs.cypress.io/api/cypress-api/screenshot-api.html
While installing the appx now i am able to see logo on launcher/install popup screen.
This worked when i made below changes:
1)Downgraded electron-builder version to: 20.39.0
2)Changed the directories entry in package.json as :
directories:{
"buildResources": "build",
"output": "build"}
3)Created appx named folder inside the build directory and created the build directory at package.json level
4)Added icon named "StoreLogo.png" inside build/appx directory that we have created earlier.
5)add the entry of the same in :
"win": {
"icon":"build/appx/StoreLogo.png"
}
6)After this just create the appx using electron-builder -w appx command
Now I have one more doubt after complete installation i am still seeing the default electron logo at the task-bar and also in the apps & features if i search for my application.
On the launcher/install popup i am able to see the app logo like below hidden with red color:
After installing and launching the app i am still able to see the default electron icon in the taskbar as below highlighted in red:
This is how my package.json build property looks:
{
"build": {
"extraFiles": [
"node_modules/ionic-enterprise-couchbase-lite-electron/**/*"
],
"publish": [
{
"provider": "generic",
"url": "***********"
}
],
"appId": "**************",
"nsis": {
"perMachine": true,
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"squirrelWindows": {},
"files": [
"electron.js",
"www/**/*",
"build/Square150x150Logo.png",
"build/Square44x44Logo.png"
],
"directories": {
"buildResources": "build",
"output": "build"
},
"appx": {
"identityName": "myApp",
"publisher": "CN=*************************",
"publisherDisplayName": "my Company",
"applicationId": "myApp",
"displayName": "myApp",
"backgroundColor": "#f2f4f7"
},
"win": {
"certificateFile": "./certs/CordovaApp.Windows10_StoreKey.pfx",
"publisherName": "my Company",
"icon": "build/appx/StoreLogo.png",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
},
"appx",
"msi"
]
},
"nodeGypRebuild": "false",
"npmRebuild": "false"
}
}
I tried adding all related resources as mentioned in : https://www.electron.build/configuration/appx but it started giving error of invalid manifest when creating a appx.
So can anyone please help me to resolve this issue?
I solved the issue by doing below changes:
1) Added the assets mentioned in the appx link: https://www.electron.build/configuration/appx
2) created appx folder in the build directory, keep the package.json as mentioned above.
3)Make sure the app logos named should be specific as metioned in the link .PNG format.
4)Earlier I had icon names as e.g: Square44x44Logo.png format .PNG then after changing the name to Square44x44Logo kept format .PNG as it is I was able to solve installed app issue.
What i realized by this is naming convention does matter a lot in case of applying icons. So the main issue caused due to pont 4.
What's the simplest folder structure I can use with Nightwatchjs? It will be used locally and for continuous integration. Currently I can't even get the demo to work. I have six errors:
module.js:469:15
module.js:417:25
bootstrap_node.js:604.10
bootstrap_node.js:394:7
bootstrap_node.js:149:9
bootstrap_node.js:509:3.
I realize this is a beginner question. I've been using Telerik and TestComplete for a few years and now we want to do CI properly so Selenium is the way to go. I'm comfortable with javascript but kind of bad at file path stuff.
What's the simplest folder structure I can use with Nightwatchjs?
The simplest NightwatchJS folder structure is:
To have 2 files (a configuration file and a file which contain you tests):
nightwatch.json
app.js (you can rename it as you want)
Example
1) nightwatch.json
{
"src_folders": [
"app.js"
],
"live_output": false,
"tests_output": "test/tests_output/",
"detailed_output": true,
"selenium": {
"start_process": false,
"host": "hub.browserstack.com",
"port": 80
},
"test_workers": {
"enabled": false,
"workers": "auto"
},
"test_settings": {
"chrome": {
"selenium_port": 80,
"selenium_host": "hub.browserstack.com",
"silent": true,
"desiredCapabilities": {
"os": "Windows",
"os_version": "10",
"browserName": "chrome",
"resolution": "1024x768",
"javascriptEnabled": true,
"acceptSslCerts": true,
"browserstack.video": "true",
"browserstack.debug": "true",
"browserstack.user": "<yourUsername>",
"browserstack.key": "<yourPassword>"
}
}
}
}
2) app.js
module.exports = {
'Does-stackoverflow-works': function (browser) {
browser
.url("http://stackoverflow.com/questions")
.waitForElementPresent('body', 2000, "Display latest Stackoverflow questions")
.end()
}
};
Run
$> nightwatch --env chrome
Output