My question is pretty simple - why testcafe verifications ignore timeout, which I set in options?
For example next method, called for a page that will never be loaded, didnt wait 20 minutes until fail, it fails faster, ignoring timeout
waitForPageLoad: async (expectedUrl: string) => {
var getPageState: ClientFunction = ClientFunction(() => {
return new Promise(resolve => {
resolve(document.readyState as string);
});
}).with({ boundTestRun: testController });
await testController.expect(((await getPageState()) as string) === "complete").ok({ timeout: 1200000});
}
}
(method call and all methods above have 'await' keyword)
Is there any explanations for such thing?
You need to rewrite your assertions. See the following example based on the changeable document.a property:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
document.a = '0';
window.setTimeout(() => { document.a = '1' }, 10000)
</script>
</body>
</html>
test.js
import { ClientFunction } from 'testcafe';
fixture `Fixture`
.page('./index.html');
test('test', async t => {
const getPageState = ClientFunction(() => {
return new Promise(resolve => {
resolve(document.a);
});
});
await t.expect(getPageState()).eql('1', { timeout: 1000 }); // it fails, increase the timeout (15000) to pass
});
Related
I'm using EJS for the first and I'm a bit confused. What's happening is that I have a list.ejs file created inside my views file. And a index.html outside I'm using a else if statement to do the logical thinking to the render my EJS file answer but when I call the res.render if I have the index.html, it displays it instead of my list.EJS, there are no errors or anything
app.js
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: true }));
app.use(express.static(__dirname));
app.get('/', (req, res) => {
let today = new Date();
let currentDay = today.getDay();
let day = ""
if (currentDay === 6 | currentDay === 0) {
day = "Weekend"
} else {
day = "Weekday!"
}
res.render('list', {dayOfWeek: day})
})
app.listen(port, () => {
console.log('Listening on port ' + port);
});
list.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To Do List</title>
</head>
<body>
<h1>To Do List</h1>
<h2>It's a <%=dayOfWeek%>
</h2>
</body>
</html>
The index.html is just a h1 Send Help..
What am I doing wrong?
I removed the index.html file and it works but it shouldn't be like that... Right?
Add this code:
const path=require("path");
app.set('views', path.join(__dirname));
I have some bool and string variable in the server side that should be passed to client side.
how can I implement this?
in my html file I want a h1 tag if my flag in the server side is true and if flag is false it just another work. at the first my flag is false.
server.js:
app.get('/' , (req, res) => {
res.sendFile(path.join(__dirname+'/views/UiOfServer.html'));
});
I found the anwser myself, the solution is useing EJS. because server rendering is so eazy with that.
I changed my html file to EJS file and my question solved. my code is:
index.ejs:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>example of EJS</title>
</head>
<body>
<% if(flag){ %>
<h1><%= username %></h1>
<% }
else{ %>
<!-- some work -->
<% } %>
</body>
</html>
server.js:
let express = require('express');
let path = require('path');
let app = express();
let router = express.Router();
app.use('/', router);
app.set('view engine', 'ejs');
const port = 2020;
app.get('/' , (req, res) => {
res.render(path.join(__dirname+'/views/UiOfServer.ejs'), {flag: false, username: 'null'});
});
app.get('/click/' , (req, res) => {
res.render(path.join(__dirname+'/views/UiOfServer.ejs'), {flag: true, username: 'Hessam :) '})
}
app.listen(port, (err, res) => {
if(err){
console.log(`Server Error: ${err}`);
}
else{
console.log(`server started on ${port}`);
}
});
I'm trying to use jsPDF with Vue but I get a ReferenceError: jsPDF is not defined. See the snippet :
let jsPrint = () => {
const doc = new jsPDF()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<button onclick="jsPrint()">
print
</button>
The script is linked in the head tag :
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $site->title() ?> - <?= $page->title() ?></title>
<link rel="stylesheet" href="<?= url('assets') ?>/css/style.css">
<!--========== JSPDF ==========-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<!--========== VUE ==========-->
<!-- development version, includes helpful console warnings -->
<script src="<?= url('assets') ?>/js/libs/vue.js"></script>
<script src="<?= url('assets') ?>/js/app.js" type="module" defer></script>
</head>
Then in a component, I have a method that should be triggered on click on a button :
exportSimple: function() {
const doc = new jsPDF()
// const target = document.querySelector('#dialog-export-content')
// doc.html(target, {
// callback: function(doc) {
// doc.save()
// },
// x: 10,
// y: 10
// })
}
But i throws an error.
I tried alternative methods to link the library : local, npm, other sources like jspdf.es.min.js. Nothing works.
Any idea ?
Using CDN the jsPDF object is available as property of jspdf which is available globally :
const { jsPDF } = jspdf
let print = () => {
const doc = new jsPDF()
}
I have downloaded a vue.js template from the web. Whenever I build files via npm the title on the index.html keeps being swapped to the name of the template. Is there a way to change the default title?
As I understand your question - you need to configure your vue.config.js file something like this (pay attention on Webpack part) - these files are from working project, so you have maximum understanding on how it could look at the end:
module.exports = {
baseUrl: '/',
outputDir: (process.env.NODE_ENV === 'production' ? '../web/' : '../web/js/'),
indexPath: '../app/Resources/views/index.html.twig',
// Setting this to false can speed up production builds if you don't need source maps for production.
productionSourceMap: false,
// By default, generated static assets contains hashes in their filenames for better caching control.
// However, this requires the index HTML to be auto-generated by Vue CLI. If you cannot make use of the index HTML
// generated by Vue CLI, you can disable filename hashing by setting this option to false,
filenameHashing: false,
lintOnSave: false,
// https://cli.vuejs.org/ru/config/#devserver-proxy
devServer: {},
// https://cli.vuejs.org/ru/config/#chainwebpack
chainWebpack: config => {
config
.plugin('html')
.tap(args => {
args[0].title = 'Ojok Deep Sales Platform';
args[0].template = './index.html.template';
return args;
})
}
};
And after you have updated your vue.config.js file, change your index.html template file to be like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title><%= htmlWebpackPlugin.options.title %></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900' rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="../js/go.js"></script>
<script type="text/javascript" src="../js/momentjs.js"></script>
<script type="text/javascript" src="../js/webphone/flashphoner.js"></script>
<script type="text/javascript" src="../js/webphone/SoundControl.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
Pay attention on what is being included in <title>-tag:
<title><%= htmlWebpackPlugin.options.title %></title>
After generating new index.html file your title should be set to whatever you have written into args[0].title option.
Hope this helps.
I'm still new at VueJS, but here were my findings. I'd love any suggested options or improvements. I went with option #2.
Option 1: set for Multiple Pages mode
vue.config.js
module.exports = {
pages: {
index: {
entry: 'src/main.js',
// template title tag needs to be <title><%= htmlWebpackPlugin.options.title %></title>
title: 'My Website Title',
},
}
}
Option 2: titleMixin (referenced from https://medium.com/#Taha_Shashtari/the-easy-way-to-change-page-title-in-vue-6caf05006863)
titleMixin.js added to mixins folder
function getTitle (vm) {
const { title } = vm.$options
if (title) {
return typeof title === 'function'
? title.call(vm)
: title
}
}
export default {
created () {
const title = getTitle(this)
if (title) {
document.title = title
}
}
}
added to main.js
import titleMixin from './mixins/titleMixin'
Vue.mixin(titleMixin)
Use in Component Pages
<script>
export default {
title: 'Foo Page'
}
</script>
Use in Vue instance with a function
<script>
export default {
title () {
return `Foo Page — ${this.someValue}`
},
data () {
return {
someValue: 'bar'
}
}
}
</script>
Option 1:
Edit your /public/index.html and replace this:
<title><%= htmlWebpackPlugin.options.title %></title>
with this:
<title>Your Title Here</title>
Option 2:
vue.config.js
module.exports = {
chainWebpack: config => {
config.plugin('html').tap(args => {
args[0].title = 'Your Title Here';
return args;
});
}
}
/public/index.html
<title><%= htmlWebpackPlugin.options.title %></title>
I would like to use html2canvas but it is not clear enough how to use it in the documentation. What libraries I should include ? and then is this peace of code just what I need ? What about the proxy ? and How I could save the screen shot after it's taken ?
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL()
window.open(img);
For me, it was working this way:
$('#map').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
The current latest version works this way:
html2canvas($('#map'),
{
onrendered: function(canvas) {
cvs = canvas.toDataURL('image/png');
window.open(cvs)
}
});
Here's a minimal, complete example that shows how to convert the DOM to canvas with html2canvas, convert the canvas to base64, and finally trigger a download.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
(async () => {
const canvas = await html2canvas(document.body);
const base64 = canvas.toDataURL();
const a = document.createElement("a");
a.href = base64;
a.download = "html2canvas-test.png";
a.click();
})();
</script>
</body>
</html>
I'm not sure what you mean about a proxy.