Develop Reference

How can I make NextJS save my changes in VSCode?

I have tried changing all .js extensions to .jsx, enabled Prettier to format on save, set it as a default formatter, reloaded, restarted the editor, but saving is still not working. I would appreciate any ideas how to make this work.

Hit Control + Shift + P (On Mac you would want to hit the Command key instead of Control) and search for >Format Document With.... Check if that work.
If it works, then maybe your setting is overridden. Open your settings.json file (Use Control + ,, then on the top right corner you would see the open settings.json). Check the javascriptreact section.
Here is the example: this setting turns on formatOnSave for all the document type, but with .jsx extension, the formatOnSave is disabled, instead the files are formatted using eslint
{
// Other settings, don't mind it
// ...
"editor.formatOnSave": true,
"[javascriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false
},
// Other settings, don't mind it
// ...
}
You may want to update the settings based on your need.

cypress goes in an infinite loop to lauch webpage

I am trying to access a URL outside of the defined environment but the page load goes in a loop and does not load the home page once the authentication is completed from Login screen
My implementation is as below:
The below utility.js file launches URL based on the environment the user selects:
export class Utility {
getBaseUrl(){
let envs = Cypress.env('ENV');
console.log(envs)
if(envs == 'production'){
return "https://prodsite.site.com.au";
}else if(envs =='canarys'){
return "https://stagenv2.site.com.au";
}else if(envs =='stage'){
return "https://stageenv.site.com.au";
}
}
}
snippet of Cypress.json file configured as below:
{
"env": {
"nzUrl": "https://search.infotrack.nz"
},
"viewportWidht": 980,
"viewportHeight": 1200,
"baseUrl": "https://stageenv.site.com.au",
}
To call the utility.js, have passed the url in a constant
const url = new Utility().getBaseUrl();
Ideally, to launch the url, i use
cy.visit(url)
To access the environment variable,
cy.visit(Cypress.env('nzUrl'));
After launching the application. The login screen loads up , authenticates itself , but to show up the home page, the page goes in a loop and fails to load it self
The baseurl works as expected , no issues there.
Facing this issue when accessing the the url in env variable
Looking for some help here. I have tried the following:
The website launches perfectly manually
Configured cypress.json with a url for launching a webpage other than baseurl, this approach did not work
Troubleshooted the webelements
I am looking forward for any help / suggestions with this information. Appreciate your kind help in advance

Basically cypress uses baseURL configuration to navigate by the commands cy.visit() and cy.requests() as you can see in the documentation here
I really recommend you to create a config file for each environment like
production.json
canarys.json
stage.json
Using that you can open your page just using cy.visit('/') or a page like cy.visit('/main') and cypress will make all the hard job for you. You don't need an extra class to get baseURL.
It may help you: https://www.cypress.io/blog/2020/06/18/extending-the-cypress-config-file/

How to add custom header for accessing a page URL and then performing test automation on that page, i am using a webdriverio,mocha,nodejs framework

I have a web page where the functionality changes when a custom header "headerKey": "headervalue" is being set through a chrome extension. While I can do this manually I want to do it through the code in order to do test automation.
Note:-
Please help with the approaches.
There is no functionality in webdriver to perform this operation.
I have used modheader but it is not working.
getModHeaderExtension() {
const filename = path.join(__dirname, "Modify.crx");
console.log(filename);
const stream = fs.readFileSync(filename);
return new Buffer(stream).toString('base64');
}

I know some time passed since the question was added, although it took me some time to figure it out by myself so maybe someone will make use of it.
Add #wdio/devtools-service to your dev dependencies (this should have the same major version as your other #wdio libraries, otherwise you can get some problems)
You need to add devtools to services in wdio.conf.ts:
export const config = {
[...]
services: ['chromedriver', 'devtools']
[...]
}
Now add you can add headers in you test method or wherever you need to:
const encodedCredentials = base64.encode(`${appConfig.basicAuthDevUser.userName}:${appConfig.basicAuthDevUser.password}`);
browser.cdp('Network', 'setExtraHTTPHeaders', {
headers: {
Authorization: `Basic ${encodedCredentials}`,
},
});
More on using devtools with wdio:
https://webdriver.io/docs/devtools-service/
More on chrome specific capabilites:
https://chromedevtools.github.io/devtools-protocol/tot/Network/

I was able to find the solution to pass a custom header while opening my webpage.
I am using ChromeDevTools service which is supported by webdriverio v5, using its method
browser.cdp(domain, command, parameters);
For the domain, command, and parameters please visit devtools protocol below:-
https://chromedevtools.github.io/devtools-protocol/

Add custom screenshots to Jasmine report using Protractor

I am using protractor for the first time and doesn't know how to add custom screenshots to jasmine report.
Currently i am have done some thing like this.
onPrepare:
jasmine.getEnv().addReporter(
new Jasmine2HtmlReporter({
takeScreenshots: true,
takeScreenshotsOnlyOnFailures: false,
consolidate: true,
consolidateAll: true,
filePrefix: 'Report',
screenshotsPath: './screenshots/',
reportPath: './pageObject/reports/'
})
);
And added the code to take the screenshot.
browser.takeScreenshot().then(function (png) {
test.writeScreenShot(png,screenshotName+ '.png');
});
test.writeScreenShot = function(data,filepath){
var stream = fs.createWriteStream(path);
stream.write(new Buffer(data, 'base64'));
stream.end();
};
But now the actual pain comes in, it takes the snapshot of entire page and attach in report which i doesn't want and i want the custom snapshot which i have taken only for specific element and attach it in jasmine report.
I couldn't understand how the snapshot is added to the report . can some help me how the snapshot is added automatically to the report so that i can try once for the custom snapshot taken by me and try adding it to the report.
Thanks in advance.

Making screenshots of a certain area is not supported by selenium itself as far as I known. You can only make a screenshot of the visible page.
If you are struggling with screenshots, have a look at https://github.com/azachar/protractor-screenshoter-plugin
(disclaimer: I am the author of the fork)
You can make screenshots on each expectation. Also, it comes with an HTML-based report so it is easy to understand why your tests are failing.

switch to a frame with Nightwatch.js

the UI I am testing is using an iframe. I am trying to switch to that iframe with the ".frame(0)" call.
module.exports = {
"test" : function (browser) {
browser
.url("my_url")
.waitForElementVisible(".frame-application-scroll-wrapper", 30000)
.frame(0)
.waitForElementPresent("#page-content", 30000)
.end();
}
};
However, #page-content is never seen which makes me think that the change frame command did not work (but returns no error neither).
Any ideas?
Thanks,
Paul

as Neoaptt mentioned (Thanks!) the issue was that the iframe element was either not present or not loaded. Adding a pause solved my issue.
By the way, if you want to exit the selected frame you should use ".frame(null)"
module.exports = {
"test" : function (browser) {
browser
.url("my_url")
.waitForElementVisible(".frame-application-scroll-wrapper", 30000)
// give time to the iframe to be available
.pause(5000)
.frame(0)
.waitForElementPresent("#page-content", 30000)
.frame(null)
// we are now back to the main page
// ... more code here ...
.end();
}
};
What also helped me to debug was to use the --verbose option, for example:
nightwatch -t tests/test4.js --verbose
This will display in your terminal all the data exchanged between nodejs and selenium.
Thanks,
Paul

Latest version of nightwatch is .frameParent() instead of .frame(null) to get back to the parent document, just in case any one else finds this post :)