How does one use NightwatchJs to automate clicking a specific part of an image? My naive approach is to select the coords attribute that matches the specific area of the image I'd like to trigger; but it doesn't work.
<img src="..." usemap="#example">
<map name="example" id="example">
<area shape="rect" coords="336,10,401,32" href="...">
<area shape="rect" coords="25,171,97,198" href="...">
...
</map>
Anyone encounter this issue or know of a work around? Thanks!
If I were you, I would play with the position of area elements inside the map element using CSS selectors like :first-child or :first-of-type. Here is a minimal working example:
PNG (map.png)
HTML/JS (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nightwatch</title>
</head>
<body>
<img src="map.png" usemap="#map">
<map name="map">
<area shape="circle" coords="51,51,29">
</map>
<script>
// When the red area is clicked, we should display an alert.
var area = document.querySelector('area');
area.addEventListener('click', function () {
alert('OK');
}, false);
</script>
</body>
</html>
Nightwatch (script.js)
module.exports = {
'Clickable image map': function (browser) {
browser
.url('http://localhost:8000/index.html')
.waitForElementPresent('map', 1000)
.click('map > area:first-child');
// ...
},
};
Command
If your environment is properly set up, you can run the script with nightwatch -t tests/script.js. You will see the alert, meaning that the red area has been clicked by Nightwatch.
Related
I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I develop needs to support ie11 so I need to force my code to work correctly.
Here is fiddle: https://jsbin.com/hemawaboqa/1/edit?html,js,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/#svgdotjs/svg.js"></script>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="svg-canvas"></div>
</div>
</body>
</html>
JS
var draw = SVG().addTo('#svg-canvas').size(400, 400)
var rect = draw.rect(100, 100)
Why that code is not working on ie11?
I have created a sample using the SVG.js 3.0 version with your code, it will show the "Object doesn't support property or method 'from'" in IE11 browser, perhaps the issue is related to the svg.js version, and it is a plugin issue, you could feedback this issue to SVG.js forum.
Besides, I suggest you could refer to the following code, to use the old version of SVG.js:
<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<title>TEST</title>
</head>
<body>
<div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
<div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="drawing">
</div>
</div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js></script>
<script>
(function () {
'use strict';
// Add title as first child of SVG element:
var createTitle = function (svgObject, text) {
var fragment = document.createDocumentFragment();
var titleElement = document.createElement('TITLE');
fragment.appendChild(titleElement);
titleElement.innerHTML = text;
svgObject.node.insertAdjacentElement('afterbegin', titleElement);
};
SVG.extend(SVG.Doc, {
namespace: function () {
return this
.attr({xmlns: 'http://www.w3.org/2000/svg', version: '1.1'})
.attr('xmlns:xlink', SVG.xlink, SVG.xmlns);
}
});
var draw = new SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({fill: '#f06'});
// Add title to SVG element
createTitle(draw, 'Rectangle');
}());
</script>
</body>
</html>
The result as below:
The library you are using has ECMA 6 elements that are not understood in IE.
If you need your project to work in IE, you will have to use another library or find out how to change it so it allows for older browsers (as suggested here: https://svgjs.dev/docs/3.0/compatibility/)
i used mathjax in HTML page , it works. but a problem related to fontsize exist.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
\(x={72^2-{\sqrt{53^2}}\over 25}\)
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
why in the first syntax[(x={72^2-{\sqrt{53^2}}\over 25})] , fontsize is very small. and what to do to increase its size.
In addition, what is the difference between the two syntax's
\(x={72^2-{\sqrt{53^2}}\over 25}\) .........1
$$x={72^2-{\sqrt{53^2}}\over 25}$$ .........2
You should use \( for inline math, and \[ as equivalent of $$.
<html>
<head>
<script type="text/javascript" async
src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>
<title> mathsjax</title>
</head>
<body>
This is part of the line: \(x={72^2-{\sqrt{53^2}}\over 25}\). Those are not:
\[x={72^2-{\sqrt{53^2}}\over 25}\]
$$x={72^2-{\sqrt{53^2}}\over 25}$$
</body>
</html>
EDIT
If it isn't enough you can also add \large or \huge.
In his comments OP says he is using HTML ckeditor, I suppose with the Mathematical Formulas widget. You can locate the demo of that widget in page linked and modify its source adding the following code:
<p><span class="math-tex">\( x={72^2-{\sqrt{53^2}}\over 25}\)</span></p>
<p><span class="math-tex">\[ x={72^2-{\sqrt{53^2}}\over 25}\]</span></p>
<p><span class="math-tex">\[ \large { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
<p><span class="math-tex">\[ \huge { x={72^2-{\sqrt{53^2}}\over 25} } \]</span></p>
This should be the result:
You can use {\displaystyle{...}} to force an expression or subexpression to use the sizes and spacing that would be used for a displayed equation. For fractions in particular, if you have the AMSmath extension loaded, you can use \dfrac{}{} in place of \frac{}{} to get a fraction in display style.
On my Web page I put translate widget when i resize browsers widged does not change size
I tried change css but i can change only css for Iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
do you heve any solution?
Google Translate popup Layout - responsive fixed
<div id="google_translate_element" style="text-align: center;"></div>
<style>
.goog-te-banner-frame.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
.goog-te-menu-frame {
max-width:100% !important;
}
.goog-te-menu2 {
max-width: 100% !important;
overflow-x: scroll !important;
box-sizing:border-box !important;
height:auto !important;
}
</style>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
function changeGoogleStyles() {
if($('.goog-te-menu-frame').contents().find('.goog-te-menu2').length) {
$('.goog-te-menu-frame').contents().find('.goog-te-menu2').css({
'max-width':'100%',
'overflow-x':'auto',
'box-sizing':'border-box',
'height':'auto'
});
} else {
setTimeout(changeGoogleStyles, 50);
}
}
changeGoogleStyles();
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
Not the solution to resizing issue but maybe helpful. You can change the default layout in the init function of the google translate selector.
Change in the line
layout: google.translate.TranslateElement.InlineLayout.SIMPLE to layout: google.translate.TranslateElement.InlineLayout.VERTICAL or layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL.
These options will show the language choices in a vertical dropdown with also either the 'Made possible by Google Translate' label under or next to it.
You will not be able to adjust the layout of this widget using strictly CSS. The <a> elements containing links for all of the languages to choose from are laid out in <td> cells in rows. Therefore, they will not be laid out dynamically with resizing.
You can however, get around this by getting all the language links in the contained <iframe> and appending them to a <div> outside the <table>.
This should perform what you seek though may still require much CSS tweaking. Much of Google's UI elements are laid out manually with pixel dimensions and overridden attributes like overflow:hidden to avoid default (sometimes inconsistent) browser behavior. This solution may require a fair bit of [poking around the DOM][1] to determine where these adjustments are being done.
This should be executed in the top-most frame to access the <iframe> element and make changes to its CSS. Note that the selector is not a unique ID so it may return a different <iframe> than expected depending on the contents of your page.
var iframe = document.querySelector('.goog-te-menu-frame.skiptranslate');
if (iframe === null) {
console.error('Could not find iframe of language links');
} else {
// Force <iframe> visibility and auto-resizing
iframe.style.display = '';
iframe.style.height = '';
iframe.style.width = '99%!important';
This should be executed in the about:blank frame of the <iframe> to have access to the elements within.
// Get all the <a> elements
var anchors = document.querySelectorAll('a.goog-te-menu2-item');
anchors = Array.prototype.slice.call(language_anchors);
if (anchors.length < 1) {
console.error('Found no language links');
}
// Get the conatiner <div> that holds the table of links
var div = document.getElementById(':1.menuBody');
if (div === null) {
console.error('Could not find div containing table of language links');
} else {
// Remove width/height attributes to have <div> resize
div.style.height = '';
div.style.width = '';
// Iterate through all language links
anchors.forEach(function (a) {
// Set display to inline=block so its rendered like text
// This is what gets the elements onto a new line if they don't fit
a.style.display = 'inline-block';
// Append them directly to the <div>
div.appendChild(a);
});
// Remove the now empty <table> to keep things clean
div.removeChild(div.querySelector('table'));
}
This may break easily if Google changes their CSS class names or element IDs. Keep that in mind and happy rendering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
}, 'google_translate_element');
}
</script>
<script type="text/javascript"
src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body>
<div id="google_translate_element"></div>
</body>
</html>
YOU NEED TO CHANGE THE "SIMPLE" TO "HORIZONTAL"
You can put this in your css file for the theme that you're using. Tweak it to make it work for you. Hope that helps!
select.goog-te-combo{width:100%!important;}
I have a xxx component, which when used with the riot-tag attribute and a standard HTML5 tag, works correctly: <article riot-tag="xxx"></article>. However when I use the riot-tag attribute inside of a loop, the tag is empty: <article each="{xxxTags}" riot-tag="{xxx}"></article>. Is using riot-tag in a loop possible at all? How can I make it work?
Additional explanation:
I have to generate several different, albeit similar components one by one. So I have an array to store them:
var xxxTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
Putting any of the textareas one by one manually for all of: xxx, yyy, zzz works fine and generates the respective components. However when I try to do it with each, they end up empty (no children) in chrome devtools, BUT otherwise identical to the ones put manually.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<my-tag></my-tag>
<!-- inlined tag definition -->
<script type="riot/tag">
<my-tag>
/*Standard, manual addition of different components (works)*/
<xxx></xxx>
<yyy></yyy>
<zzz></zzz>
/*Standard addition of same components in a loop (works)*/
<div each={myTags}>{tag}</div>
<br>
/*Addition of different components with "riot-tag" manually (works)*/
<div riot-tag="xxx"></div>
<div riot-tag="yyy"></div>
<div riot-tag="zzz"></div>
/*Addition of different components with "riot-tag" in a loop (DOESN'T WORK should look like the example above)*/
<div each={myTags} riot-tag="{tag}"></div>
this.myTags = [{tag: 'xxx'}, {tag: 'yyy'}, {tag: 'zzz'}];
</my-tag>
<xxx>
<p>X content</p>
</xxx>
<yyy>
<p>Y content</p>
</yyy>
<zzz>
<p>Z content</p>
</zzz>
</script>
<!-- include riot.js and the compiler -->
<script src="//cdn.jsdelivr.net/g/riot#2.2(riot.min.js+compiler.min.js)"></script>
<!-- mount normally -->
<script>
riot.mount('*');
</script>
</body>
</html>
Okay, looks, like the tags with riot-tag attribute are not mounted when generated with an each-loop (still looks like a bug?). For the above-mentioned code, adding this does the job:
this.on('mount', function() {
for(var i = 0; i < this.myTags.length; i++) riot.mount(this.myTags[i].tag);
});
I am using following code to create a html element in the page body with using YUI.
This code doesn't produce any error.
The issue is, the paragraph element is not created in the html page.
<html>
<head>
<title>YUI Test</title>
<meta charset="UTF-8">
<script src="http://yui.yahooapis.com/3.14.1/build/yui/yui-min.js"></script>
<script>
// Create a YUI sandbox on your page.
YUI().use('node', function(Y) {
// Create DOM nodes.
var contentNode = Y.Node.create('<p>');
contentNode.setHTML('This is a para created by YUI...');
});
</script>
</head>
<body>
<h1>Page body section...</h1>
</body>
</html>
The node is created, but it is also detached from the DOM. You have to attach it to the DOM by using either
Y.one('body').append(contentNode);
or
contentNode.appendTo(Y.one('body'));
or
Y.one('nav.main-navigation').insert(contentNode, 'before');
or any of the other methods for manipulating dom in YUI.