I am pretty new to nightwatchjs and encountering a strange behaviour when I tried to assert simple text in a single dom
Same assertion method and one works but another doesn't
// This works
client.expect.element('#MenuToggle').text.to.contain('Menu');
// This doesn't work and it always returns empty "" string
client.expect.element('#BackToMain').text.to.contain('Back to main');
The code given in your question is correct and should work... To help you with debugging, please try to run the following minimal working example:
HTML (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nightwatch</title>
</head>
<body>
Menu
Back to main
</body>
</html>
JavaScript (test.js)
module.exports = {
'Test': function (browser) {
browser.url('http://localhost:8000/index.html'); // Change this if needed
browser.expect.element('#MenuToggle').text.to.contain('Menu');
browser.expect.element('#BackToMain').text.to.contain('Back to main');
browser.end();
}
};
Command
nightwatch -t tests/test.js
If it does not work:
Check if your environment is OK (it works with Node v7.7.4 + Nightwatch v0.9.14).
Edit your question to add more code.
Related
demo path:
https://github.com/mathjax/MathJax-demos-web/blob/master/input-tex2chtml.html
I add mathjax config:
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [['$', '$']]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml-full.js"></script>
run like this:
The $ sign should not be there, but it still shows，even though the Tex grammar is right.
How do I make the $ go away? Where am I wrong? and what's the solution?
Your configuration is correct. There is a slight issue with the way you are trying to use the input field and tex2chtmlPromise via convert.
You can see that your code is working if you put your lines in the body rather than in the textarea:
<!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">
<title>MathJax v3 with interactive TeX input and HTML output</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
MathJax = {
tex: {
inlineMath: [["$", "$"]]
}
};
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js"></script>
</head>
<body>
Testing math:
<p>$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$</p>
</body>
</html>
For more information about your usage issue, see this GitHub Issue Delimiter not working with MathJax.tex2chtmlPromise method
"the MathJax.tex2chtmlPromise() function takes a LaTeX string as its parameter, which does not require a delimiter. [...] So if you are passing delimiters to this, they will be typeset as part of the math. There is no need for delimiters because you are identifying the math, not MathJax, and are passing it directly to the function. There is no need for delimiters, because there is no need to separate the math from the surrounding text, as you have already done that yourself."
When you use the $ delimiter in your document, your specified delimiters will be handled appropriately. The delimiters are necessary in the document body as a way to distinguish it from the surrounding text.
However, in the textarea, it is expected that the only thing the user inputs is valid Math. Given this expectation, delimiters are unexpected. When the raw input is passed to the MathJax.tex2chtmlPromise any text included will be typeset as math. Hence, why your $ signs appear as literals in your output field.
I am trying to use peerjs in vue app. So I added the cdn script in vue index.html file's header like this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1.0">
<title>peer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/peerjs/0.3.9/peer.min.js"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Now in a components' mounted hook, I am doing this to just console the id
var peer1 = new Peer();
peer1.on('open', function(id) {
console.log('My peer1 ID is: ' + id);
});
Nothing happens.
I then created a simple html file and run that html file I was able to see the id.
Next I tired to see XHR tab, I see when running a plain html file, two ajax calls is sent and in the result an ID is returned. But in vue, there is nothing like this. All I get a socket that returns this values
{websocket: true, origins: ["*:*"], cookie_needed: false, entropy: 1058218289}
cookie_needed
:
false
entropy
:
1058218289
origins
:
[":"]
websocket
:
true
One more thing, peers js documentations says to use api key, but if I use api key nothing happens in vue or html. Without the key, in html file I get the id.
Anyone knows please help me. Thank you.
I am trying to get a11ySuite in Polymer 3.0 tests to work.
When I am running the test with polymer test, the tests times out, and I can see in the console of the automated browser the following error:
Uncaught ReferenceError: Polymer is not defined
at Suite.a11ySuite.eachTest (a11ySuite.js:51)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)
If I am running in debug mode, from polymer serve url, I am getting this error:
a11ySuite.js:49 Uncaught TypeError: fixtureElement.create is not a function
at Suite.a11ySuite.eachTest (a11ySuite.js:49)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)
This is also preceded by a bunch of 404 coming from mocha, regarding lodash, sinonjs and test-fixture, assuming this is because it is ran in serve mode.
This is my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Verifier - a11y test</title>
<script src="../node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/web-component-tester/browser.js"></script>
<script type="module" src="../src/verifier.js"></script>
</head>
<body>
<test-fixture id="BUVA11y">
<template>
<verifier id="verifier"></verifier>
</template>
</test-fixture>
<script>
suite('A11y testing', function() {
a11ySuite('BUVA11y');
});
</script>
</body>
</html>
I can't find more information online, and the docs are very limited on this subject (actually not precise indeed).
a11ySuite was moved to wct-browser-legacy as of web-component-tester version 6.4.3. Given the "legacy" naming, I'm guessing it's deprecated. I assume it's used like this:
<script type="module">
import {a11ySuite} from 'wct-browser-legacy/a11ySuite.js';
a11ySuite('view1'); // "view1" == template name
</script>
But I could not get it to work in an otherwise clean polymer-3-starter-kit project (i.e., the a11ySuite property exists in the module but is always undefined). Setting up a breakpoint where that variable is defined, I can see that the variable is actually never set because the Mocha pre-require event handler is never invoked for whatever reason.
However, it appears that axe-core (via pwa-helpers) is the newest a11y testing tool to use in Polymer 3, based on the test code in pwa-starter-kit:
<script type="module">
import 'axe-core/axe.min.js';
import {axeReport} from 'pwa-helpers/axe-report.js';
suite('views a11y tests', function() {
test('my-view1', function() {
const el = fixture('view1');
return axeReport(el);
});
...
});
</script>
I am writing a JSP that displays a list of clubs in a grid. The grid shows the name of the club together with its latitude, longitude, website and description.
The actual data to be displayed is stored in a variable (a dojo.data.ItemFileWriteStore) called clubStore.
When the page is loaded, a call is made to a servlet to retrieve the data. The handling function then deletes all the items held in the store and adds new items returned by the servlet.
The JSP code is shown below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clubs</title>
<style type="text/css">
#import "./dojoroot/dojo/resources/dojo.css";
#import "./dojoroot/dijit/themes/tundra/tundra.css";
#import "./dojoroot/dojox/grid/resources/Grid.css";
#import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
var clubData={
items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
};
var layoutClub=[{field:"name", name:"Name", width:10},
{field:"lat", name:"Lat", width:5},
{field:"lon", name:"Long", width:5},
{field:"webSite", name:"Web Site", width:10},
{field:"description", name:"Description", width:'auto'}];
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
</script>
<link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
<%#include file="header.jsp"%>
<div id="clubGrid"
style="width: 800px;"
autoHeight="true"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:clubStore,
structure:layoutClub,
query:{},
queryOptions:{'deep':true},
rowsPerPage:40">
</div>
<br>
<script>
var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
dojo.xhrGet({
url: urlString,
handleAs: "text",
load: function(data) {
// remove items...
var allData=clubStore._arrayOfAllItems;
for (i=0; i<allData.length; i++) {
if (allData[i]!=null) {
clubStore.deleteItem(allData[i]);
}
}
var jsonClubArray=JSON.parse(data);
for (var i=0; i<jsonClubArray.clubs.length; i++) {
var club=jsonClubArray.clubs[i];
var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
clubStore.newItem(newClub);
}
clubStore.save();
}
});
</script>
</body>
</html>
The script to process the servlet response sometimes fails because clubStore is undefined (debugging using Firebug). This does seem to be a spurious fault as some times everything works perfectly.
Any assistance in understanding how to define the clubStore variable would be appreciated.
Thanks.
James.
I think what might be happening is the body script is sometimes running before the head script, so it is kind of a race condition. You could try wrapping your body script into a dojo.ready. (I assume from your code that you are using dojo 1.6 or earlier since you are not using the AMD loader style.)
dojo.ready(function(){
// Put your xhr request code here.
});
You may also want to try testing with a firebug breakpoint in the head and body script. See if the head is sometimes running first.
So the problem turned out to be a syntax error in the declaration - missing '{' in the line
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
The spurious aspect to the fault was a red herring - I had previously declared the variable as part of the DOM object and that caused a spurious fault. So I messed up my regression testing as well as introducing a syntax error!
Thanks.
James.
You could try switching the order of your require statements, so it's like this:
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
If that fails, you could set parseOnLoad to false, and then call dojo.parser.parse() after your store has been instantiated like so:
(assuming you are using dojo 1.6 or earlier based on your code)
dojo.addOnLoad(function() {
dojo.parser.parse();
});
Put your clubStore in the global space... just remove the var keyword in front of it...
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.