Currently, I'm working with Cypress test automation. I have an index.html file inside cypress/downloads/sample/index.html. The index.html file has the below structure.
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<script src="https://test"></script>
<script src="https://test2"></script>
<!-- sample Config -->
<script>
const authConfig = {
clientID: "sample value",
signInRedirectURL: "sample value",
serverOrigin: "sample value"
};
</script>
</body>
</html>
I will get copy the content inside the script tag which will be displayed in an application UI using a button click for the copy operation so the copied content will be as below
<script>
const authConfig = {
clientID: "abcd1234",
signInRedirectURL: "https://localhost:8000",
serverOrigin: "https://localhost:8000"
};
</script>
Method written for copy and paste operation is as below:
static CopyConfigs() {
cy.get(COPY_ICON).click();
cy.wait(7000);
}
static pasteoperation(Location){
cy.task("getClipboard").then((value) => {
cy.writeFile(Location + "/sample/index.html", value);
});
}
writeFile will replace the whole index.html file content
Need help on
I want to replace(paste) the content copied to the index.html file by replacing only the script tag(related to authConfig) content inside the index.html file without replacing the whole index.html file content. So that the values for clientID, signInRedirectURL, and serverOrigin inside the script tag of index.html file will have the new values. Is it possible to read the index.html file and capture the script tag and replace the <script> tag content using Cypress automation? Appreciate your support on how to achieve this.
Related
I have a Materialize.min.css link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
And i need to include this file only in one template of Vue, because it damages other files.
Is it possible to do?
Copy all of the content from this URL https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css and create a new css file then past the copied contents on your project.
mounted() {
const plugin = document.getElementById("__ID_OF_YOUR_SELECTED_ELEMENT__");
plugin.setAttribute(
"href",
"__PATH_OF_YOUT_CSS__"
);
plugin.async = true;
document.head.appendChild(plugin);
}
will apply only the element you had selected
So, here I've got a locally stored file named "its_me.pdf" in the assets folder.
I'm trying to reference a download to the PDF using an HTML tag
<a href="../assets/its_me.pdf" download>PDF</a>
It is a real PDF file, if I go double click on the file manually I can see it display and it's real. However, when I go to my application on: http://localhost:4200/its_me (name of route in which it lives), and click on the link, I get a "Failed - No File" error.
Based on #AkashBhave answer I was able to get to work this way.
In my script tag:
data () {
return {
publicPath: process.env.BASE_URL
}
}
then in my template.
<a:href="`${publicPath}whatever.pdf`" download="download">PDF</a>
Alternatively with webpack, in your vue.config.js you add this;
chainWebpack: config => {
config.module
.rule("pdf")
.test(/\.pdf$/)
.use("file-loader")
.loader("file-loader");
}
then in the script tag;
data () {
return {
pdfLink: require("#/assets/whatever.pdf"),
}
}
Finally, in the template;
<a :href="pdfLink" download="download">PDF</a>
Relative imports should work by default with Vue. Try putting your PDF file into the /public folder of your application.
You can then reference the file using string interpolation, like so:
<link rel="icon" href="<%= BASE_URL %>its_me.pdf">
More information is available at
https://cli.vuejs.org/guide/html-and-static-assets.html#interpolation
If that doesn't work, something might be wrong with your Webpack or build configuration.
I am trying to print a VueJS component with custom print style.
Three Vue plugins look interesting on this subject:
1.printd
2.vue-print-nb
3.html-to-paper
Out of the three only html-to-paper has a options object that can pass a custom css style in order to dynamically pass some print css.
My issue is that i can't seem to load the custom css, and also bootstrap classes are messed up on print action.
This is basically what i am doing.
import VueHtmlToPaper from 'vue-html-to-paper'
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=no'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'./myPrint.css'
]
}
Vue.use(VueHtmlToPaper, options)
Any suggestion is welcomed.
Thanks
I have tried all these three I think the best one is print.js which is not specifically for Vue.js but it is easily install-able and usable in the vue components.
For example
<script>
import print from "print-js";
export default {
methods: {
printing() {
const style =
"#page { margin-top: 400px } #media print { h1 { color: blue } }";
const headerStyle = "font-weight: 300;";
printJS({
printable: "rrr",
type: "html",
header: "Doctor Name",
headerStyle: headerStyle,
style: style,
scanStyles: false,
onPrintDialogClose: () => console.log("The print dialog was closed"),
onError: e => console.log(e)
});
},
printVisit(id) {
this.$htmlToPaper("rrr");
this.$htmlToPaper("rrr", () => {
console.log("Printing completed or was cancelled!");
});
}
}
};
</script>
VueHtmlToPaper opens a new window with its own style tag. So when you pass a CDN it works, if u pass a local file it does not because it tries to access the resource in your web server but in the wrong URL. Let's see how the page looks when we use a CDN and a local CSS file.
CDN
<html>
<head>
<link rel="style" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
</body>
</html>
Local CSS file
And let's say you are calling the print function from http://localhost:8080/somepage
<html>
<head>
<link rel="style" href="./myPrint.css">
</head>
<body>
</body>
</html>
This will try to open http://localhost:8080/somepage/myPrint.css. Obviously this will not be accessible to print dialogue.
Solution
Put your custom CSS file in the public or static folder (Where you usually keep favicon)
Modify script path in options, prepend server basepath with the CSS file
Sample Option
import VueHtmlToPaper from 'vue-html-to-paper'
/* This will change according to your server */
let basePath= 'http://localhost:8080';
const options = {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=no'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
`${basePath}/myPrint.css`
]
}
Vue.use(VueHtmlToPaper, options)
Also, the simplest way to access root-relative path is to use /. User /style.css instead of ./style.css
I am new to express. Basically my question is very simple.
I want to serve files like /css javascript from one public directory..
layout.hbs
<html>
<head>
<link href="css/style.css" rel="stylesheet" />
<script src="js/app.js"></script>
</head>
<body>
{{{body}}}
</body>
</html>
router.js --> I have three route that point to one index.hbs
router.get("/", function(req,res){
res.render("index.hbs");
})
router.get("/articles", function(req,res){
res.render("index.hbs");
})
router.get("/articles/show/:id", function(req,res){
res.render("index.hbs");
})
Now the problem is when I run this address:
curl "http://localhost:3000/"
http://localhost:3000/js/app
http://localhost:3000/css/style.css
----------------------------------------------
curl "http://localhost:3000/articles"
http://localhost:3000/articles/js/app
http://localhost:3000/articles/css/style.css
----------------------------------------------
curl "http://localhost:3000/show/1"
http://localhost:3000/show/1/js/app
http://localhost:3000/show/1/css/style.css
notice that the /css and /js path keep changing in accordance to UrlRequest. How to prevent this from happening?
I am using express and handlebars, and have already set my static file
app.use(express.static(path.join(__dirname, 'public');
You should specify the URLs to your JS and CSS as absolute URLs in your template: instead of css/style.css, use /css/style.css.
The first means "use this path relative to this page to browsers (and curl), the second "use this path relative to the host - which is what you want.
I've added this code at the top of themes/bootstrap/views/layouts/main.php
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/custom.js');
in my html it does show
<head>
<script type="text/javascript" src="/dev2/js/custom.js"></script>
</head>
and in the custom.js file i have this
jQuery(function($) {
alert('test');
}
when the page loads, i don't get any alert showing. the files do exist in the right directory and i get no firebug warnings. All JS files that i've manually included using registerScriptFile for some reason doesn't work. None of my plugins i've included work. Any ideas?
You can try this:
$(document).ready(function(){
alert('hello');
// Enter code here
});
in your custom.js .
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl.'/js/custom', CClientScript::POS_HEAD);
and wrong in script:
jQuery(function($) {
alert('test');
});
have to work