I'm wondering how if I can check the head of a HTML-document for existence of a particular string with cucumber.
Actually I'm interested in specific robots directives, so I launch in the first of my steps a browser (atm Firefox) and open a local site.
In the second step I check the entire html-code for a string:
#b.html.include?('<meta name="robots" content="noindex, follow">').should == true
And see my scenario failing at the second step. (expected true, got false)
Surprisingly a check for an partial string is succesfull:
#b.html.include?('name="robots"').should == true
But as soon as I check for
#b.html.include?('<meta name="robots"').should == true
or just
#b.html.include?('a name="robots"').should == true
I get a false again.
So, I thought the presence of whitespaces causes this behavior.
A quick check with only a bonus whitespace
#b.html.include?(' name="robots"').should == true
and the testscenario is green.
A search for a whole sentence in the document body
#b.html.include?('<h1>Yarr, that "is" supeb!</h1>').should == true
is also passing.
I've also tried to move the h1 heading into the head of the document (test still passing) and the meta-tag into the body (test is still failing)
I'm using cucumber 1.2.0 and ruby 1.9.3p0 with Firefox driven via watir-webdriver and wondering if I'm doing something wrong.
Actually I have just one feature with this simple steps and a minimal html-site with meta-data and this one "Yarr" sentence. No rails, no rake. OS X 10.7
Please tell me if I should provide more information… I'm tinkering with this stuff for hours.
Edit1: added the HTML of the site I check.
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="utf-8">
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<link rel="shortcut icon" type="image/png" href="/public/images/favicon.png">
<script src="/public/javascripts/jquery-1.6.4.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="canonical" href="google.de">
<meta name="robots" content="noindex, follow">
</head>
<body>
<h1>Yarr, that "ist" superb!</h1>
</body>
</html>
The Problem:
It seems that the properties of HTML tags will not always be in the order that they were written. See this:
puts #b.html
#=> <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Home</title>
<meta charset="utf-8" />
<link href="/public/stylesheets/main.css" media="screen" rel="stylesheet" />
<link href="/public/images/favicon.png" type="image/png" rel="shortcut icon" />
<script charset="utf-8" type="text/javascript" src="/public/javascripts/jquery-1.6.4.min.js"></script>
<link href="google.de" rel="canonical" />
<meta content="noindex, follow" name="robots" />
</head>
<body>
<h1>Yarr, that "ist" superb!</h1>
</body></html>
Notice that the <meta content="noindex, follow" name="robots" /> is not the same order as your HTML file. This explains why your tests are giving the results they are.
Suggest Solution:
Assuming that you only care that the particular meta tag appears in the header (and not the particular order the tag is written), I would suggest using:
b.head.meta(:name => 'robots', :content => 'noindex, follow').exists?.should == true
Related
So in html i specify a path to an image (for example:
<img src="img_galaxy.jpg">
Unlike chrome, when i inspect element i this don't see this image nor other resource displayed in network monitor section.
i have a small gif to demonstrate about what i mean. Sorry for loss of quality, i had to optimize.
[Left: Firefox | Right:Chromium]
Sample code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_320.jpg 320w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_914.jpg 914w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1321.jpg 1321w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg 1400w"
src="img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg"
alt="">
</body>
</html>
I develop ASP.Net Core 2.1 RazorPages web application. I want parametrize the the value of asp-page tag helper.
So I use following code in cshtml file. There is a del_link local variable defined in begining of file. This variable is late used as parameter for second asp-page tag helper.
#page
#{
string del_link = "/UnloadDelete";
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
<a asp-page="/UnloadEdit">Details</a>
<a asp-page=#del_link>Delete</a>
</div>
</body>
</html>
ASP.Net Razor generate following HTML code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div>
Details
Delete
</div>
</body>
</html>
As you can see in HTML code, asp-page="/UnloadEdit" is properly rendered to HTML code, but asp-page=#del not, it is rendered to <a href="">. How I can use local variable for asp-page tag helper in Razor Pages?
Thanks in advance.
You must pass a page name to the asp-page attribute. So what you are trying to do is not supported. If #del_link renders a relative URL, you can pass that to the href attribute instead. There may be other suitable solutions, depending on why you feel the need to use #del_link at all.
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>
All of my JSF pages contain the following imports
<h:head>
<title>My Registration Page</title>
<link href="stylesheet/reset.css" rel="stylesheet" type="text/css" />
<link href="stylesheet/style.css" rel="stylesheet" type="text/css" />
<link rel="icon" type="image/png" href="images/icons/favicon.png" />
<script language="javascript" src="script/script.js"/>
Not i dont want to copy and paste all these lines in the head element of my xhtml page;but want to include only a single page, so i want to remove all these lines from the head and put them into another file and then just include that file.
Kind Regards
I have a page that Google Chrome insists on thinking is in French.
Here's a snapshot of it:
http://yootles.com/outbox/overcleverchrome.html
Note that I'm including a meta http-equiv tag to tell it that it's in fact in English:
<meta http-equiv="Content-language" content="en">
But it doesn't help.
Is there anything else I can do to prevent this?
Google Chrome currently requires several tags to make an (HTML5) document opt out of translation. Before doing this, you should be sure that you know your audience's language, as otherwise it will prevent foreign sites from properly translating your site.
The relevant tags are:
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en_US" />
And here is a full example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="google" content="notranslate" />
<meta http-equiv="Content-Language" content="en_US" />
</head>
<body>
Dies ist ein Test Deutsch
</body>
I found a post which might help you: http://www.blogsdna.com/4593/how-to-stop-google-from-translating-your-website-or-webpage.htm
You can either use a meta tag:
<meta name="google" value="notranslate">
Or you can use a class:
<span class="notranslate"></span>
I hope that answered your question.
EDIT: I Just checked my blog which I offer in German and English. On each language version Chrome doesn't ask me for translation: http://kau-boys.de
I checked my source code and the multilanguage plugin only included this code:
<meta http-equiv="Content-Language" content="en_US" />
So maybe your locale needs to have a subregion, like US in this example.
You guys should be referencing http://support.google.com/webmasters/bin/answer.py?hl=en&answer=79812 and not guessing what works
<meta name="google" content="notranslate" />
Adding <meta name="google" value="notranslate"> (not W3C by the way) or <meta name="google" content="notranslate"> doesn't avoid the annoying translate popups.
BUT I have tried the following and it seems to work:
You can avoid translation of the page by adding class="notranslate" to the <body> tag!
I have success with <meta name="google" content="notranslate" />
remember to open the page in a new tab or a new window after insert
<meta name="google" value="notranslate">
otherwise it looks not work, but it actually works well.
On an older version of Chrome (18.x), the Content-Language meta tag seems to have no effect on the translation popup, unless it is lowercased:
<meta http-equiv="content-language" content="en" />
(to be clear --http-equiv="Content-Language" did not work; neither did name="content-language")