Problem using variables in test actions in Firefox - firefox

I am getting this error:
1) Error on page "http://localhost:8080/en/index.html":
import declarations may only appear at the top level of a module:
    No stack trace available
whenever I run my test on Firefox. My tests are written in Typescript and are testing my page locally. The tests have no problems in Safari and Chrome, only in Firefox does it complain about import declarations. I have tried to recreate the error in non-local sites but have not been able to.
import { Selector } from "testcafe"
const full = "http://localhost:8080/en/index.html"
fixture`This is my tests`
.page`http://www.example.com/`;
test("URL", async t => {
const logo = Selector(".Logo")
await t
.navigateTo(full)
.expect(logo.textContent).contains("LogoName")
})
Hoping someone can shed some light on how to fix this!

Can you open the page in Firefox and check if you have error message in the JS console?
Testcafe will fail if there is any JS error.
You can use --skip-js-errors flag to ignore js errors (https://devexpress.github.io/testcafe/documentation/using-testcafe/command-line-interface.html#-e---skip-js-errors) or ... fix that error on your page.

Related

P5.js not loading sound

I am trying to load an mp3 files (according to the examples) but I am getting
Unable to load bg.mp3.
The request status was: 0 ()
The error stack trace includes: loadSound
I have referenced my problem to this Github issue https://github.com/processing/p5.js-sound/issues/141 but I am unable to find a solution.
Also, I am using Brackets editor which starts a local server and opens a new Chrome instance.
let mySound;
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3");
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Strange, the Sound: Load and Play Sound example seems to work fine.
The error seems to point to on an XHR load error, but it's unclear why.
It's worth trying the full version of loadSound() including the error callback:loadSound(path, [successCallback], [errorCallback], [whileLoading]).
Hopefully the errorCallback details will help solve the problem
e.g.
let mySound;
function onSoundLoadSuccess(e){
console.log("load sound success",e);
}
function onSoundLoadError(e){
console.log("load sound error",e);
}
function onSoundLoadProgress(e){
console.log("load sound progress",e);
}
function preload() {
soundFormats('mp3', 'ogg');
mySound = loadSound("bg.mp3",onSoundLoadSuccess,onSoundLoadError,onSoundLoadProgress);
}
function setup(){
createCanvas(displayWidth,displayHeight);
mySound.setVolume(0.1);
mySound.play();
}
Also try to navigate to the web server Brackets launches and access the file manually.
(e.g. http://localhost:BRACKETS_HTTP_PORT_HERE/bg.mp3). If everything is ok (bg.mp3 is in the same folder as the index.html file), your browser should load and display the default audio playback controls.
It's worth noting there are many other http servers you could try, here a few examples:
if you're on OSX you can use Python's HTTP Server (python -m SimpleHTTPServer in python 2 or python -m http.server)
if you use node.js there' an http-server module (e.g. npm install http-server then http-server in your project folder)
Apache variants (depending on OS, MAMP/WAMP/XAMPP, etc.), though might be overkill
The quick fix for anyone having this issue is to use a Local web server. (mamp/xamp/local etc). Then reference it in the preload/setup
sound = loadSound('http://localhost/audio.mp3', loaded);
The documentation does state -
you will need the p5.sound library and a running local server

Vuepress oidc-client preventing build

It looks like Vuepress is made for public docs, but we decided to add client and server security to protect some of the doc pages. But unfortunately although oidc-client (https://github.com/IdentityModel/oidc-client-js/wiki) works during dev, it throws exception when build.
I get ReferenceError: window is not defined and when I try to trick the compiler with const window = window || { location: {} }; I get TypeError: Cannot read property 'getItem' of undefined
Any idea how to make this work?
This was driving me nuts also. I discovered the component I was trying to add was looking at window.location in its code - this was triggering the error.
My understanding is that the build process has not access to Browser things like window etc.
As soon as I removed the window.location bit from my code things built just fine and all is well.

Bypassing "Insecure Content Blocked" with Selenium Ruby script

I am fairly new with using Selenium in my Ruby script. Basically my script will make a get request to some url and log in. However my script is failing to send the email and log in automatically due to the Google Chrome pop up about insecure content blocked since one of the images on the page is using http and not https.
I was able to run the script successfully months ago however just recently when trying again, it is unable to proceed with logging in so I dont know why it stopped working all of a sudden.
The error that I see in terminal is this. In irb, I can go through each line of code successfully including using Selenium's "send_keys" and "click" to automatically sign in.
[2018-09-26T13:02:55.002527 #14131] INFO -- : [#http://company.com/favicon.ico'. This request has been blocked; the content must be served over HTTPS.">]
web_app.rb:54:in `': Console Errors Found! (Exception)
I tried searching for some solution but have been unsuccessful. There has been some variations of responses to similar problem but not too much luck with getting it to work.
Any feedback on how to fix would be appreciated.
start Chrome manualy and disable the warning - https://www.thewindowsclub.com/disable-insecure-content-warning-chrome
and use the set browser profile, there is my setup:
#BeforeClass
public static void setUpClass() {
System.setProperty("webdriver.chrome.driver", "C:\\Users\\pburgr\\Desktop\\chromedriver\\chromedriver.exe");
ChromeOptions options = new ChromeOptions();
options.addArguments("user-data-dir=C:\\Users\\pburgr\\AppData\\Local\\Google\\Chrome\\User Data");
driver = new ChromeDriver(options);
driver.manage().window().maximize();}

How does React deal with pre-compiled HTML from PhantomJS?

I compiled my reactjs using webpack and got a bundle file bundles.js. My bundles.js contains a component that make API calls to get the data.
I put this file in my html and pass the url to phantom.js to pre-compile static html for SEO reasons.
I am witnessing something strange here, the ajax calls for APIS are not getting fired at all.
For example, I have a component called Home which is called when I request for url /home. My Home component makes an ajax request to backend (django-rest) to get some data. Now when I call home page in phantomjs this api call is not getting fired.
Am I missing something here?
I have been using React based app rendering in Phantomjs since 2014. Make sure you use the latest Phantomjs version v2.x. The problems with Phantomjs occur because it uses older webkit engine, so if you have some CSS3 features used make sure they are prefixed correctly example flexbox layout.
From the JS side the PhantomJS does not support many newer APIs (example fetch etc.), to fix this add the polyfills and your fine. The most complicated thing is to track down errors, use the console.log and evaluate code inside the Phantomjs. There is also debugging mode which is actually quite difficult to use, but this could help you track down complex errors. I used webkit engine based browser Aurora to track down some of the issues.
For debugging the network traffic, try logging the requested and received events:
var page = require('webpage').create();
page.onResourceRequested = function(request) {
console.log('Request ' + JSON.stringify(request, undefined, 4));
};
page.onResourceReceived = function(response) {
console.log('Receive ' + JSON.stringify(response, undefined, 4));
};

Unable to get jasmine-jquery fixtures to load in Visual Studio with Chutzpah, or even in browser

I'm prototyping a MVC.NET 4.0 application and am defining our Javascript test configuration. I managed to get Jasmine working in VS2012 with the Chutzpah extensions, and I am able to run pure Javascript tests successfully.
However, I am unable to load test fixture (DOM) code and access it from my tests.
Here is the code I'm attempting to run:
test.js
/// various reference paths...
jasmine.getFixtures().fixturesPath = "./";
describe("jasmine tests:", function () {
it("Copies data correctly", function () {
loadFixtures('testfixture.html');
//setFixtures('<div id="wrapper"><div></div></div>');
var widget = $("#wrapper");
expect(widget).toExist();
});
});
The fixture is in the same folder as the test file. The setFixtures operation works, but when I attempt to load the HTML from a file, it doesn't. Initially, I tried to use the most recent version of jasmine-jquery from the repository, but then fell back to the over 1 year old download version 1.3.1 because it looked like there was a bug in the newer one. Here is the message I get with 1.3.1:
Test 'jasmine tests::Copies data correctly' failed
Error: Fixture could not be loaded: ./testfixture.html (status: error, message: undefined) in file:///C:/Users/db66162/SvnProjects/MvcPrototype/MvcPrototype.Tests/Scripts/jasmine/jasmine-jquery-1.3.1.js (line 103)
When I examine the source, it is doing an AJAX call, yet I'm not running in a browser. Instead, I'm using Chutzpah, which runs a headless browser (PhantomJS). When I run this in the browser with a test harness, it does work.
Is there someone out there who has a solution to this problem? I need to be able to run these tests automatically both in Visual Studio and TeamCity (which is why I am using Chutzpah). I am open to solutions that include using another test runner in place of Chutzpah. I am also going to evaluate the qUnit testing framework in this effort, so if you know that qUnit doesn't have this problem in my configuration, I will find that useful.
I fixed the issue by adding the following setting to chutzpah.json:
"TestHarnessLocationMode": "SettingsFileAdjacent",
where chutzpah.json is in my test app root
I eventually got my problem resolved. Thank you Ian for replying. I am able to use PhantomJS in TeamCity to run the tests through the test runner. I contacted the author of Chutzpah and he deployed an update to his product that solved my problem in Visual Studio. I can now run the Jasmine test using Chutzpah conventions to reference libraries and include fixtures while in VS, and use the PhantomJS runner in TeamCity to use the test runner (html).
My solution on TeamCity was to run a batch file that launches tests. So, the batch:
#echo off
REM -- Uses the PhantomJS headless browser packaged with Chutzpah to run
REM -- Jasmine tests. Does not use Chutzpah.
setlocal
set path=..\packages\Chutzpah.2.2.1\tools;%path%;
echo ##teamcity[message text='Starting Jasmine Tests']
phantomjs.exe phantom.run.js %1
echo ##teamcity[message text='Finished Jasmine Tests']
And the Javascript (phantom.run.js):
// This code lifted from https://gist.github.com/3497509.
// It takes the test harness HTML file URL as the parameter. It launches PhantomJS,
// and waits a specific amount of time before exit. Tests must complete before that
// timer ends.
(function () {
"use strict";
var system = require("system");
var url = system.args[1];
phantom.viewportSize = {width: 800, height: 600};
console.log("Opening " + url);
var page = new WebPage();
// This is required because PhantomJS sandboxes the website and it does not
// show up the console messages form that page by default
page.onConsoleMessage = function (msg) {
console.log(msg);
// Exit as soon as the last test finishes.
if (msg && msg.indexOf("Dixi.") !== -1) {
phantom.exit();
}
};
page.open(url, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
phantom.exit(-1);
} else {
// Timeout - kill PhantomJS if still not done after 2 minutes.
window.setTimeout(function () {
phantom.exit();
}, 10 * 1000); // NB: use accurately, tune up referring to your needs
}
});
}());
I've got exactly the same problem. AFAIK it's to do with jasmine-jquery trying to load the fixtures via Ajax when the tests are run via the file:// URI scheme.
Apparently Chrome doesn't allow this (see https://stackoverflow.com/a/5469527/1904 and http://code.google.com/p/chromium/issues/detail?id=40787) and support amongst other browsers may vary.
Edit
You might have some joy by trying to set some PhantomJS command-line options such as --web-security=false. YMMV though: I haven't tried this myself yet, but thought I'd mention it in case it's helpful (or in case anyone else know more about this option and whether it will help).
Update
I did manage to get some joy loading HTML fixtures by adding a /// <reference path="relative/path/to/fixtures" /> comment at the top of my Jasmine spec. But I still have trouble loading JSON fixtures.
Further Update
Loading HTML fixtures by adding a /// <reference path="relative/path/to/fixtures" /> comment merely loads in your HTML fixtures to the Jasmine test runner, which may or may not be suitable for your needs. It doesn't load the fixtures into the jasmine-fixtures element, and consequently your fixtures don't get cleaned up after each test.

Resources