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.
Related
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/
I'm having difficulties to add an HyperLink to my Word Document using the Javascript API. I've look to Doc and I can't find any hints how to accomplish my duty...
Here is my Question: What is the best way to add an HyperLink inside a Word Document using the Javascript API.
And Here is what I tried:
Word.run((context: Word.RequestContext) => {
var range = context.document.getSelection();
context.load(range, "hyperlink");
return context.sync().then(() => {
range.font.highlightColor = '#FFFF00';
range.hyperlink = "C:\My Documents\MyFile.doc";
}).then(context.sync);
});
I've added the highlightColor just to have a visual that my changes are being sync. Everything seems fine but the Hyperlink property is not being updated. Am I missing something?
And If you guys are wondering what's this syntax, I'm using TypeScript.
Good, if you don't mind i will reply in JavaScript :)
Setting a hyperlink to a file must work (provided that the file exists :) ). I have this simplified example working successfully, btw you don't need to load the range for setting this.
Also hyperlinks is now supported as preview, so please make sure that you are running an updated (latest) version of Word (go file and install updates) and most importantly make sure you are using the preview CDN for Office.js which is here: https://appsforoffice.microsoft.com/lib/beta/hosted/office.js
Word.run(function(context) {
// Insert your code here. For example:
context.document.getSelection().hyperlink = "C:\My Documents\MyFile.doc";
return context.sync();
});
I am currently having an issue with handsontable on Chrome. What appears is that the table is scrollable, but the values and row headings are not updating. The situation can be seen from the below pictures.
Not Scrolled
Scrolled to Right and Down
As you can see, the scrolling takes place, but the values do not update. I should note, that this behavior only happens on Chrome. On Firefox and Safari, the table works as expected.
So more information about my environment.
Using Handsontable 0.28.0
Also using AngularJS and Angular Material
The code that I used to create this example is as follows
var Handsontable = require('handsontable');
// This function finds a div I am using, removes its contents, and then creates the table.
$scope.setSheet = function() {
var elementID = "shreadsheet-" + $scope.tabData.id;
var element = document.getElementById(elementID);
element.innerHTML = '';
var readonlyArr = $scope.tabData.sheetHeaders.map(function() {
return {readOnly : true};
});
var hot = new Handsontable(element, {
data: Handsontable.helper.createSpreadsheetData(1000, 1000),
colWidths: 47,
rowHeaders: true,
colHeaders: true
});
};
I compiled this code using the following command I found in the docs at the Handsontable github page.
SheetController_work.js -o SheetController.js -r moment -r pikaday -r zeroclipboard -r numbro
Has anyone else experienced this problem on Google Chrome, or does anybody have any suggestions?
Thanks.
For me this problem magically went away. The things that happened in the time that I noticed that this problem exists and the time that it magically fixed itself are as follows. You may want to try some of these if you experience this problem.
Restarted Computer (didn't work by itself)
Turned off localhost server from terminal and navigated to different directory.
Quit terminal.
Quit Google Chrome
EDIT with proper solution
I removed the paramater variableRowHeights: false and everything works now.
I'm trying to use Phantomjs to capture a screenshot from the same page that the user is on.
For example, A user is on my-page.html and has made some changes to the elements of this page, now I need to take a screenshot of an element (DIV) inside this page (my-page.html) and save it.
I found a few examples of Phantomjs and php which I tested and worked on my server and it stores the image on my server too BUT all of the examples I found are for taking screenshots of external pages/URLs and not the 'current page'.
This is fairly a straight forward process in Html2canvas but the quality of the produced image is not good at all so I decided to use Phantomjs to produce higher quality screenshots AND also it allows me to zoom in on the page.
Here is a simple example of using Phantomjs for taking screenshot of External URL's:
var system = require("system");
if (system.args.length > 0) {
var page = require('webpage').create();
page.open(system.args[1], function() {
//viewportSize being the actual size of the headless browser
page.viewportSize = { width: 3000, height: 3000 };
//the clipRect is the portion of the page you are taking a screenshot of
page.clipRect = { top: 0, left: 0, width: 3000, height: 3000 };
page.zoomFactor = 300.0/72.0;
var pageTitle = system.args[1].replace(/http.*\/\//g, "").replace("www.", "").split("/")[0]
var filePath = "img/" + pageTitle + '.png';
page.render(filePath);
console.log(filePath);
phantom.exit();
});
}
Could someone please let me know if this is possible at all?
EDIT (Answer to my own question),
it turns out that you cannot take a screenshot of the current page if the page's elements have been edited by the user on the live basis. the only screenshots you can take with phantomjs is a bare bone of the page.
Reason: phantomjs is a headless browser and uses QtWebKit which runs on the server and it is not a javascript library same as html2canvas.
Explained and experienced by others HERE:
Another use case that is an issue for a project I’m working on is that you need drag and drop. Headless drivers have some basic functionality, but if you need to be able to set precise coordinates you’re stuck with Selenium.
For taking screenshot of current page you must pass the correct URL to Phantom script
Syntax :
phantomjs <"Phantom code url(as in documentation report.js)"> <"page url of which you want to take scrrenshot"> <"result saving url">
Now assuming you are passing correct URL :
In my case I was unable to take screenshot of my page as there was a spring security annotation to it, so it was not letting me to proceed so Please check for any security you added to your page if yes then remove it and then try again.
If case 1 does not apply to you surely there is an problem with URL you are passing please double check it.
Please let me know if problem still persist please post any errors(if occurring) you are getting.
I've forked a Gnome Shell Extension, as I want to modify it to fit my personal preferences. I want to send a notification each time an event occurs. Sending the notification itself is fairly easy with Main.notify(summary, text). However, I just can't find out how to set a custom icon. [EDIT: The following is wrong. I looked up bad code]According to the github repo of gnome-shell I can define an icon via an optional parameter: Main.notify(summary, text, params), where params will be checked in MessageTray.js l.367:
params = Params.parse(params, { gicon: null,
secondaryGIcon: null,
bannerMarkup: false,
clear: false,
soundName: null,
soundFile: null });
if (params.gicon || params.clear)
this.gicon = params.gicon;
So I tried to use the following command:
Main.notify(summary, text, {gicon: myicon});
But the {gicon: myicon} part is ignored completely and the default icon is used :-/.
I'm new to Javascript and GNOME programming, so pls don't hate me :-)
Is using Main.notify() recommended generally, or is it deprecated?
Cheers, Maphardam
I think that Main.notify() is generally recommended, as it is used in some of the "official" extensions.
However, Main.notify() only takes two parameters (msg, details) and thus you cannot use this function to set a custom icon.
You can however copy the source of Main.notify() and adapt it to your own needs. Inside the following function the source of the notification is set to a newly created source with a custom icon.
function notify(msg, details, icon) {
let source = new MessageTray.Source("MyApp Information", icon);
Main.messageTray.add(source);
let notification = new MessageTray.Notification(source, msg, details);
notification.setTransient(true);
source.notify(notification);
}
For example you could call it with notify("MyApp", "Test", 'folder-symbolic');.