I have simple html page:
<body>
<h1>This is my sample page</h1>
<div>This is my sample page content</div>
</body>
and simple css file for that:
div {
background: red;
color: white;
}
.aqua {
color: aqua;
}
h1 {
color: red;
}
I'm using puppeteer to get css coverage:
const puppeteer = require('puppeteer');
(async() => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.coverage.startCSSCoverage()
await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' });
const cssCoverage = await page.coverage.stopCSSCoverage();
console.log(JSON.stringify(cssCoverage, null, 2));
await browser.close();
})();
From code above I've got output like:
[
{
"url": "http://localhost:3000/main.css",
"ranges": [
{
"start": 4,
"end": 58
},
{
"start": 102,
"end": 130
}
],
"text": " div {\n background: red;\n color: white;\n }\n\n .aqua {\n color: aqua;\n }\n\n h1 {\n color: red;\n }\n"
}
]
Do you know any tool/library that may be used to nicely visualize coverage output I got ?
#lusarz I'm not aware of any native reporter for puppeteer. However, there's a puppeteer-to-istanbul to generate istanbul reports.
Related
I am seeing this using puppeteer-stream to record video (it's a thin 1-file wrapper around puppeteer).
Notice how it's not centered vertically. There is no scrollable area either, this is it.
The HTML is this:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<style>
html, body {
margin: 0;
padding: 0;
height: 800px;
width: 800px;
}
#content {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: #000;
}
#row {
display: inline-block;
font-size: 32px;
width: 600px;
text-align: center;
}
#row * {
text-align: center;
position: relative;
color: #9A7FAE;
}
#row .highlight {
color: #BEE5B0;
}
</style>
</head>
<body>
<div id='content'><div id='row'><span>i am some text</span></div></div>
</body>
</html>
And the Puppeteer script is essentially this:
const { launch, getStream } = require('puppeteer-stream')
const fs = require('fs')
const file = fs.createWriteStream(`${__dirname}/poem.webm`)
const wait = (ms) => new Promise((res, rej) => setTimeout(res, ms))
async function start() {
const browser = await launch({
defaultViewport: null,
args: [`--window-size=${800},${800}`]
})
const page = await browser.newPage();
await page.setViewport({
width: 800,
height: 800,
})
await page.goto('file:///Users/me/poem.html')
const stream = await getStream(page, { audio: true, video: true })
await page.click('#row')
console.log("recording")
stream.pipe(file).on('end', () => {
console.log('end')
})
setTimeout(async () => {
await stream.destroy()
file.close()
console.log("finished")
await browser.close()
}, 1000 * 30)
}
start()
Why is it not centering vertically? How do I get it to vertically center?
I have Vue single-file component which displays a product's details (well its meant to anyway). All my data seems to be loading fine from a Vuex store. This is my Product.vue page:
<template>
<div class="page-content">
{{Product}} <!-- this works and shows JSON on the page -->
{{Product.ProductTitle}} <!-- this shows nothing at all -->
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "Product",
computed:
{
...mapGetters({
Product: 'getProduct',
})
},
serverPrefetch() {
return this.getProduct();
},
mounted() {
if (!this.Product.length) {
this.getProduct();
}
},
methods: {
getProduct() {
return this.$store.dispatch('loadProduct', {ProductID: this.$route.params.ProductID})
}
}
}
</script>
The data in the computed Product variable is just this:
[ { "ProductID": 12552, "ProductTypeID": 1, "ProductStatusID": 3, "ProductTitle": "Sony PlayStation 4 Pro" }]
I cannot fathom out why {{Product}} displays the whole JSON object, but {{Product.ProductTitle}} shows nothing?
UPDATE: JSFiddle showing problem
You have an object inside array inside array e.g.: [[{}]] so you have to get the data like this: {{Product[0][0].ProductTitle}}
new Vue({
el: "#app",
data: {
Product: [
[{
"ProductID": 14896,
"ProductStatusID": 3,
"CountryID": 207,
"ProductTitle": "PS4 Pro Console + Call of Duty: Modern Warfare / Death Stranding + Metro Exodus",
"ProductItemDescription": "<p>The best PS4 Pro bundle offer!</p>"
}]
]
}
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
li {
margin: 8px 0;
}
h1 {
color: black
}
h2 {
color: blue;
margin-bottom: 15px;
}
del {
color: rgba(0, 0, 0, 0.3);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<article role="article" class="">
<h1>
{{Product[0][0].ProductTitle}}
<!-- this doesn't work? -->
</h1>
<h2>
{{Product}}
</h2>
</article>
</div>
I am using ag-grid in my angular application and trying to export to excel. I want to style the header row in the excel. Can anyone help me how to achieve this? I tried the below but doesnt seems to be working.
this.excelStyles = [
{
id: 'smallFont',
font: {
fontName:'Calibri',
size: 9
}
},
{
id:'blueBackground',
interior: {
color: 'blue',
pattern: 'solid'
}
}
]
defaultColDef: {
cellClassRules: {
smallFont: (params) => true,
blueBackground: (params) => params.rowIndex == 0
}
}
Thanks
Seting the excelstyle with id 'header' as shown below will set style for the excel headers.
{
id:'header',
interior: {
color: '#002776',
pattern: 'solid'
},
font: {
color: '#ffffff',
fontName: 'Calibri',
size: 9,
bold: true
}
}
I am using Highcharts to plot the graph of temperature vs time. I am having a JSON file wherein data from the backend keep updates the JSON file. I want to call ajax function such that the graphs automatically generates with respect to time. How to do that? I am new to high charts, please help me.
You can use Series.addPoint method.
http://api.highcharts.com/highcharts/Series.addPoint
Here is a example of using Highcharts with live data with GET HTTP requests.
const options = {
chart: {
type: 'spline'
},
title: {
text: 'Live Bitcoin Price'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Price (USD)'
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Live Bitcoint Price [USD]',
data: []
}]
}
const chart = Highcharts.chart('container', options)
// Data
const getData = () => {
setInterval(() => {
window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => {
return response.json()
}).then((data) => {
chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) })
})
}, 3000)
}
getData()
#import 'https://code.highcharts.com/css/highcharts.css';
.highcharts-background {
fill: #222;
}
.highcharts-title,
.highcharts-axis-title {
fill: #DDD;
}
.highcharts-credits,
.highcharts-credits:hover {
fill: #222;
}
body {
background-color: #222;
margin 0 !important;
}
#container {
margin: 0;
padding: 0;
border: 0;
background-color: #222;
min-height: 400px;
height:95%;
width:95%;
position:absolute;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Live example:
https://jsfiddle.net/xpfkx91w/
Im trying to cancel every url requests that google chrome does with my extension, but I cant achieve it. Here's the code:
// Headers.js
var tabId = parseInt(window.location.search.substring(1));
function cancel(requestDetails) {
console.log("Canceling: " + requestDetails.url);
return {cancel: true};
}
chrome.webRequest.onBeforeRequest.addListener(
cancel,
{urls: ["<all_urls>"]},
["blocking"]
);
window.addEventListener("load", function() {
chrome.debugger.sendCommand({tabId:tabId}, "Network.enable");
chrome.debugger.onEvent.addListener(onEvent);
});
window.addEventListener("unload", function() {
chrome.debugger.detach({tabId:tabId});
});
var requests = {};
function onEvent(debuggeeId, message, params) {
if (tabId != debuggeeId.tabId)
return;
if (message == "Network.requestWillBeSent") {
var requestDiv = requests[params.requestId];
if (!requestDiv) {
var requestDiv = document.createElement("div");
requests[params.requestId] = requestDiv;
requestDiv.textContent = params.request.url;
}
if (params.redirectResponse)
appendResponse(params.requestId, params.redirectResponse);
document.getElementById("container").appendChild(requestDiv);
} else if (message == "Network.responseReceived") {
appendResponse(params.requestId, params.response);
}
}
Here's the manifest.json:
{
"name": "Live HTTP headers",
"description": "Displays the live log with the http requests headers",
"version": "0.7",
"permissions": [
"debugger",
"webRequest",
"webRequestBlocking"
],
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_title": "Live HTTP headers"
},
"manifest_version": 2
}
Here's the background.js:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.debugger.attach({tabId:tab.id}, version,
onAttach.bind(null, tab.id));
});
var version = "1.0";
function onAttach(tabId) {
if (chrome.runtime.lastError) {
alert(chrome.runtime.lastError.message);
return;
}
chrome.windows.create({url: "headers.html?" + tabId, type: "popup", width: 800, height: 600});
}
And here is the headers.html:
<html>
<head>
<style>
body {
font-family: monospace;
word-wrap: break-word;
}
#container {
white-space: pre;
}
.request {
border-top: 1px solid black;
margin-bottom: 10px;
/*background-color:red;*/
}
</style>
<script src="headers.js">
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I already look in stackoverflow about this topic, but I couldnt solve this problem. Can someone give me a hand? Thanks