This extension can be used in Azure devops to publish Jmeter HTML reports as a seperate tab(Parallel to Summary tab). Right now full support of Jmeter report and any generic html report has been developed, however this extension can also be extended to publish other complex HTML reports as well.
Visual Studio includes project templates to help you get started when you create a web project. You can create web application projects or web site projects. By considering the most appropriate project type before you begin, you can save time when you create, test, and deploy the web project. HTML 11 extension provides tool windows in Visual Studio 2017/2019 showing preview of static and dynamic web pages you are currently editing, on desktop and mobile devices.
This extension has been tested with the following Jmeter versions:
- This is the root html of the extension, when a user clicks on 'Published HTML' within azure devops, this html will get loaded. So anything which needs to be rendered to the user should be part of this html. There are several ways to achieve this, replacing div ids, appending to div ids, class ids etc.
- The default HTML editor (for static HTML) doesn't have a design view. To set the default editor to the Web forms editor which does have a design view, Right click any HTML file in the Solution Explorer in Visual Studio and click on Open with Select the HTML (web forms) editor.
- 4.0
- 5.0
- 5.3
The file structure of Jmeter reports in version 4 and 5 hasn't changed, so it is expected that this extension will work for all 4.* and 5.* versions of jmeter.
Usage:
1. Install the below extension in your azure devops org:
2. Run command line Jmeter with -o arg in your azure pipeline.
For e.g. jmeter -n -t TestAPI.jmx -l LoadReports/results.jtl -e -o LoadReportsThis produces result files and folders having detailed jmeter report of the run.
3. Now, use the extension in your azure devops pipeline to publish this report on Azdo.
This will make the Jmeter report compatible to be viewed and analysed within azure devops.
If you want to publish a simple HTML document to AZDO in a seperate tab then do the following:
This is how Jmeter reports look within azdo after using this extension:
Customizing the extension
As the extension currently supports Jmeter report and generic HTML reports (single page), it makes sense to customize the extension to support multiple other type of HTML reports like Locust, Robot etc. This type of customization can be done by making a contribution to the extension.
Anatomy of the extension
Visual Studio Html Code
This extension contains 2 major components:
1. Azure devops task(publishhtmlreport)
This is used to publish files to be consumed by the extension. This task does a console.log('##vso[task.addattachment type=type;name=name;]') of the files to be sent to the extension. More about how this works is here: https://docs.microsoft.com/en-us/azure/devops/pipelines/scripts/logging-commands?view=azure-devops&tabs=bash.
2.Frontend code for rendering report content
When js files are sent to the extension, it reads the content of the js files and does an inline append of the js files in the index.html page(main page of the extension). After all js scripts are appended in the html page, index.html containing the jmeter load test report is rendered to the user when they click on the 'Published HTML' tab parallel to the Summary tab. This code is generic enough to accept any type of content(js, html, css etc) and append that inline in index.html.
There are 3 important files which will need customization if you want to include any other report type:
1. publishhtmlreport/index.ts
This is a typescript while which contains the logic of rendering js files and content based on 'htmlType' arguement provided to publishhtmlreport@1 task. While customizing the extension, we can add one more accepted value of htmlType, for e.g. locust and render the required files using consol.log as done for jmeter reports in the present code base.
2. tab.ts
This is a typescript file which contains the code for fetching the published files from the azure devops task and inserting the fetched content into index.html (which is the root html which gets loaded when the tab for the extension is clicked).
3. index.html
This is the root html of the extension, when a user clicks on 'Published HTML' within azure devops, this html will get loaded. So anything which needs to be rendered to the user should be part of this html. There are several ways to achieve this, replacing div ids, appending to div ids, class ids etc. I have used appendChild() in most situations, but during customization anything which works and appends the into the index.html during run time can be used.
And when the above 3 files are changed, custom implementation type can be mentioned in the 'htmlType' arguement and the extension will render whatever was appended in the root html page. For e.g. :
Relevant files can be html, css or js files which can be appended in the html page using appendChild() or similar implementation.
Build Process of the extension.
Before building the extension, you need to have docker engine installed on your local machine or if you are doing a build in a CI pipeline, docker engine needs to be installed on the pipeline agent too.
Steps to build:
1. Take a git clone of this repo:
2. Specify version of Jmeter in bootstrap.sh, run.sh and Dockerfile. Then run bootstrap.sh
Running this script will bootstrap your local repo and include essential files needed to build the extension.
3. Now increment the build version in task.json and vss-extension.json.
4. Generate vsix file.
Run publishhtmlreport/tsc and npm run build, this will generate vsix file which can be uploaded to the marketplace.
Contributing to the extension
This project welcomes contributions and suggestions.
9th Feb 2018Hey, it’s Zell. Welcome back to Part 2 of the VS code setup series.
If you haven’t watched the 1st part yet, I suggest you go watch it first, because everything we’re going to do today follows from there. Everything follows from there.
What we’re going to do in this video is to setup VS code to write HTML, CSS and JavaScript properly. Let’s work on HTML first.
Format On Save
The first I like to do is add editor.formatOnSave to your settings file. With this option turned on, VS Code will format or (beautify) your code when you save the file. It’s very very useful for maintaining good quality code.
HTML Settings
VS Code has a weird way of splitting lines by the number of characters. If you have a long paragraph of text in your HTML and if you hit save, you may notice that long paragraph gets split into two lines of code. It’s pretty weird because you want to use HTML tags to split them properly.
What I’ll do is set the wrapLineLength property to 0. This prevents VS Code from acting in the weird manner. While I’m at the HTTML part, I also set suggestions for angular1 and ionic to false since I don’t use them.
That’s it for the settings file.
HTML Extensions
VS Code has pretty code HTML Extensions. I use the following extensions:
Visual Studio Free Download
- Auto close tag
- Auto rename tag
- intellisense for CSS Names
Auto close tag helps you close HTML tags automatically. You can write lesser keystrokes, which is always a win.
Auto rename tag helps you rename the closing tag when you change the opening tag. This is a lifesaver because I always forget to rename the closing tag whenever I change an opening tag.
Intellisense for classnames gives you auto class completions, which when you’re writing classes. It doesn’t always work, but when it works, it’s useful. I have no idea why it works or why it doesn’t sometime. This is a bonus for me.
That’s it for HTML. Let’s move on to CSS.
CSS
For CSS, I install the following extensions.
Visual Studio Html Code
- Sass
- Prettier
- Stylelint
- CSS Peek
Sass gives you syntax highlighting for Sass files (both .sass and .scss). I use Sass whenever I write CSS, so this is a no-brainer.
Prettier is the best CSS formatter I’ve seen to date. When you install prettier, you can hit save and your CSS or Sass files will be formatted properly. You can even add stylelint integrations which is useful if you’re more advanced on the config part of things.
Stylelint is a CSS Linter. A Linter is a tool that checks your file for consistent formatting. It also tells you when there is an error, so you don’t make silly typo mistakes.
CSS Peek gives you the ability to search for CSS Selectors in a file. It helps when you have a long CSS file.
Settings-wise, I set prettier.stylelintIntegration and and stylelint.enable to true. That’s all. If you don’t use stylelint, there’s nothing for you to configure.
JavaScript
For JavaScript, I install the following extensions.
- JavaScript standard style
- JavaScript standardjs styled snippets
- Sublime Babel
- npm intellisense
JavaScript standard style
JavaScript Standard Style is a linter that follows the JavaScript standard format. It’s a popular format made by a guy called @feross. It contains a linter plus a formatter. But making the formatter work is kinda tricky.
To make the formatter work with VSCode, you need disable the default formatter built into VS Code. To do so, you set javascript.validate.enable to false.
To make JavaScript Standard Style work with Prettier, you also need to disable the default formatter built into VSCode. You can do by adding “javascript” to prettier.disableLanguages. I also add javascriptreact and json to the array of disabled languages.
Then, you’ll need to turn on JavaScript Standard Style’s formatter with standard.autoFixOnSave and standard.validate.
JavaScript standardjs styled snippets gives you some snippets that can help you increase your coding speed. For example, you if type cl followed by tab, you’ll get console.log. You can find a list of snippet extension keywords in the snippet itself.
Sublime Babel gives you better syntax highlighting for JavaScript files when you use newer JavaScript syntax through Babel. That is pretty self explanatory so I’m not going to say anymore.
npm intellisense is good when you use npm modules in your code. It helps you autocomplete node modules, which is awesome.
Wrapping up
This is how I configure VS Code for HTML, CSS and JavaScript.
I hope this video has been helpful for you. In the next video, I show you some useful extensions I use to improve the overall VS Code experience.
If you enjoyed this article, please tell a friend about it! Share it on Twitter. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!