I'm using this simple code to generate a pdf document from http://example.com/
but I keep getting a blank pdf generated ...
Am I missing something ?
const puppeteer = require('puppeteer');
puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }).then(function (browser) {
browser.newPage().then(function (page) {
page
.goto('http://example.com/', { waitUntil:['domcontentloaded', 'networkidle0','load'] })
.then(page.pdf({ path: 'result.pdf', format: 'letter' }))
.then(() => {
browser.close();
})
})
})
I used the no-sandbox option because of kernel issues.
I'm using CentOS 7
I had to wait for the promise in page.goto().then ...
const puppeteer = require('puppeteer');
puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] }).then(function (browser) {
browser.newPage().then(function (page) {
page
.goto('https://www.example.com', { waitUntil: ['domcontentloaded', 'networkidle0', 'load'] }).then(function (response) {
// page.emulateMedia('screen')
page.pdf({ path: 'result.pdf', format: 'letter' })
.then(function (res) {
browser.close();
}).catch(function (e) {
browser.close();
})
})
})
})
Related
I am trying to create a framework for API tests using cypress and I am facing an issue accessing the data between tests using an alias. Is there something that I am missing?
custom.js
Cypress.Commands.add('getResource', function (uri) {
cy.request({
url: uri,
method: 'GET'
}).then(function (response) {
return cy.wrap(response);
});
});
test.js
exports.__esModule = true;
context('requests', function () {
it('validate get call response', function () {
let re = cy.getResource('https://reqres.in/api/users?page=2','resp')
re.then(function (response) {
cy.wrap(response.body).as('respbody');
cy.wrap(response.status).as('respstatus');
//cy.log(JSON.stringify(response.body));
});
});
it('Tests test', function () {
cy.wait('#respbody').then((body) => {
console.log(JSON.stringify(body));
});
});
});
cypress version - 8.2.0
By design cypress cleans up aliases after each test. So you can do something like this cypress recipe
Your getResource custom command is taking just one parameter, hence we are passing just one papameter.
exports.__esModule = true;
let responseBody;
let responseStatus;
context('requests', () => {
before(() => {
cy.getResource('https://reqres.in/api/users?page=2')
.then(function(response) {
responseBody = response.body
responseStatus = response.status
})
})
beforeEach(() => {
cy.wrap(responseBody).as('responseBody')
cy.wrap(responseStatus).as('responseStatus')
})
it('Get Response status', function() {
cy.wait('#responseStatus').then((responseStatus) => {
console.log(responseStatus)
})
})
it('Get Response Body', function() {
cy.wait('#responseBody').then((responseBody) => {
console.log(JSON.stringify(responseBody))
})
})
})
I have to download a pdf, but it requires first to collect cookies, by visiting the page which hosts the PDF link.
I click the link but a blanc PDF is downloaded with same pages number as the expected one.
(async () => {
const browser = await puppeteer.launch({
dumpio: true,
headless: false,
devtools: true,// I want to see what's going on
})
const [page] = await browser.pages();
page.on('console', msg => console.log(msg.text()));
await page.goto(url_cookie, { waitUntil: ['domcontentloaded', 'networkidle0', 'load'] });
page._client.send('Page.setDownloadBehavior', { behavior: 'allow', downloadPath: './', });
page.once('response', async (response) => {
if (response.url() !== url_pdf) return;
console.log('resp', response.url());
});
const css = 'a[href="' + url + '"]';
await page.waitForSelector(css)
const eval = async css => {
const a = document.querySelector(css);
console.log(a)
return fetch(a.href, {
method: 'GET',
credentials: 'include',
}).then(r => r.text())
};
const txt = await page.evaluate(eval, [css]);
fs.writeFileSync('./test.pdf', txt,)
await page.close();
await browser.close();
})();
I have a Vue.js component in Laravel, it's loading with:
Vue.component('user-profile', require('./components/UserProfile.vue').default);
However, when I use this.$router.go() in it, I get the following error:
TypeError: Cannot read property '$router' of undefined
So, I've add this to my routes:
const routes = [
{
path: '/profile',
component: UserProfile
},
...
];
But then, I get:
Uncaught ReferenceError: UserProfile is not defined
So, I replaced:
Vue.component('user-profile', require('./components/UserProfile.vue').default);
by:
import UserProfile from './components/UserProfile.vue';
But I get this error:
Unknown custom element: - did you register the
component correctly?
How should I fix this issue to be able to use this.$router.go() in my component ?
=== EDIT ===
I'm using this.$router.go() here:
methods: {
async update () {
await axios.put(`/api/user/` + this.data.id, this.user)
.then(function (response) {
console.log(response);
this.$router.go()
})
.catch(function (error) {
console.log(error);
});
}
},
Either Use arrow function
methods: {
async update () {
await axios.put(`/api/user/` + this.data.id, this.user)
.then((response) => { // check here
console.log(response);
this.$router.go()
})
.catch((error) => {
console.log(error);
});
}
},
Or use var vm = this;
methods: {
async update () {
var vm = this;// check here
await axios.put(`/api/user/` + this.data.id, this.user)
.then(function (response) {
console.log(response);
vm.$router.go(); // check here
})
.catch(function (error) {
console.log(error);
});
}
},
Read about arrow function
**my rout file and when i type directly posts in URL it shows the posts but with created method in app.js it shows nothing **
Route::get('/posts', function () {
$posts_json = DB::table('posts')
->orderBy('posts.created_at','desc')->take(4)->get();return $posts_json;}
My app.js file
const app = new Vue({
el: '#app',
data: {
msg: 'make post',
content:'',
posts: [],
bUrl: 'http://localhost/pathikhome',
},
ready: function(){
this.created();
},
created(){
axios.get(this.bUrl +'/posts')
.then(response => {
console.log(response);
this.posts = response.data;
})
.catch(function (error) {
console.log(error);
});
},
methods: {
addPost(){
axios.post(this.bUrl +'/addPost', {
content:this.content
})
if not success
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
}});
ready is not supported anymore. That's Vue v1. Your new method is mounted. See https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram and https://v2.vuejs.org/v2/guide/migration.html#ready-replaced
Also data is a function that returns a data object, so if should look like this:
data: function() {
return {
msg: 'make post',
content: '',
posts: []
}
}
remove this.bUrl in the url of your axios:
created(){
axios.get('/posts')
.then(response => {
EDIT:
try to remove the ready function:
ready: function(){
this.created();
},
your data() should have a return inside:
data() {
return{
msg: 'make post',
content:'',
posts: [],
bUrl: 'http://localhost/pathikhome',
}
},
I create SPA with VueJs and Laravel.
Homepage i get all posts via api laravel and axio responsive had data object.
But i can not update to posts property.
Error in chrome debug tool:
My code in Wellcome.vue
import { mapGetters } from 'vuex'
import axios from 'axios'
export default {
name: 'welcome',
layout: 'default',
metaInfo: { titleTemplate: 'Welcome | %s' },
computed: mapGetters({
authenticated: 'authCheck'
}),
data: () => ({
title: 'Demo Blog',
}),
props: {
posts: {
type: Object
}
},
created () {
axios.get('/api/posts')
.then(function (response) {
this.posts = response.data;
})
.catch(function (error) {
console.log(error);
});
},
}
You are using a regular function as a callback which means this reference changes. You need to use arrow function here . () => {}.
axios.get('/api/posts')
.then((response) => {
this.posts = response.data;
})
.catch((error) => {
console.log(error);
});
First of all you defined posts in your props property. You should not mutate a prop from child component. Props are One-Way-Data-Flow
you can inititialize posts in you data property as follows:
data(){
return{
posts: null
}
}
Then you can fetch data via your API and assign it to your posts in the data property
this in you then function does not point to the vue instance.
So its better you do it like this
created () {
var vm = this;
axios.get('/api/posts')
.then(function (response) {
vm.posts = response.data;
})
.catch(function (error) {
console.log(error);
});
},
}
Or you an => function like this
created () {
axios.get('/api/posts')
.then( (response) => {
this.posts = response.data;
})
.catch(function (error) {
console.log(error);
});
},
}