I'm trying to do navigation test in protractor and don't see any consitency with the baseUrl in the config and the url used in the test.
protractor.conf.js
exports.config = {
baseUrl: 'http://localhost:4200/'
}
navbar.e2e-spec.ts
import { NavbarPage } from './navbar.po';
import * as protractor from './../protractor.conf.js';
describe('navbar', () => {
let navbar: NavbarPage;
const baseUrl = protractor.config.baseUrl;
beforeEach(() => {
navbar = new NavbarPage();
browser.get('/');
});
it(`should see showcase nav item, be able to (click) it,
and expect to be navigated to showcase page`, () => {
const anchorShowcase = navbar.anchorShowcase;
expect(anchorShowcase.isDisplayed()).toBe(true);
anchorShowcase.click();
browser.waitForAngular();
expect(browser.getCurrentUrl()).toBe(baseUrl + '/showcase');
});
});
Although when I run the e2e test it uses a different port:
** NG Live Development Server is listening on localhost:49154, open your browser on http://localhost:49154/ **
Why is the test url set to port 49154. This apparently seems to be the default if you start a new angular-cli project: https://github.com/angular/angular-cli
How can I get control over the baseUrl / Or is http://localhost:49154/ safe to use for all my angular cli projects?
By default when you do ng e2e the command take --serve value as true. It means it will build and serve at that in a particular URL. Not the baseUrl you passed in protractor.conf.js
that is why, you are getting a random URL served when testing you app like http://localhost:49154/
Now as you don't want build during test and want to test existing build (URL) like http://localhost:4200/ you need to pass --no-serve in your command line and it will pick baseUrl from the protractor.conf.js
you can also pass baseUrl in the command line like below. note that this not baseUrl but --base-href=
ng e2e --no-serve --base-href=https://someurl.com:8080
When running Angular CLI's ng e2e command, it states in the wiki that the default port will be random, as seen here:
https://github.com/angular/angular-cli/wiki/e2e
Under the serve submenu.
The e2e command can take in all the same arguments as serve so to keep the port the same just pass in --port my-port-number to the ng e2e command.
As far as that port being safe to use, I wouldn't use it, it is just a random port after all. I would stick to the default unless you have a use-case for changing it. The port is mainly relevant for the dev server, not so much for where ever the production code runs.
Aniruddha Das's solution doesn't work anymore as this option isn't there from Angular CLI 6.x version, you can try following -
ng e2e --dev-server-target=
please see following reference
Related
I have been trying to get my portfolio working on Github Pages with a custom domain, I have build everything with Sapper / Svelte. Locally everything works great, but when I deploy the site, I get my 404 error page when first loading the domain, if I then use the links to navigate the site it works perfect. What surprises me is that even the index works perfectly but ff I then reload the page, I get the 404 again.
I followed this Sapper and github tutorial.
But I am using a CNAME in the static folder (it is deployed at the root) to get the domain name to work, I also changed the following places to include the domain.
In server.js I have the following line for the base url:
const dev = NODE_ENV === 'development';
const url = dev ? '/' : '/';
polka() // You can also use Express
.use(
url,
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
In package.json I have the following:
"scripts": {
"dev": "sapper dev",
"build": "sapper build --legacy",
"export": "sapper export --basepath <custom-domain> --legacy",
"start": "node __sapper__/build",
"deploy": "npm run export && node ./scripts/gh-pages.js"
},
I have tried different combinations for the basepath and url. For example with and without https, I also tried the github repo name. And also tried it with and without CNAME file.
I probably don't understand the basepath well enough, but the documentation was not extensive enough for a beginner like me.
Does anybody know what I'm doing wrong?
After looking into the issue with colleagues, turns out that the problem was slightly different.
For custom domain, no base path adjustments need to be made. So no url in server.js and no --basepath in package.json.
The reason it did not update was because my gh-pages.js still used the wrong sapper export command.
scripts/gh-pages-js needs to look like:
ghpages.publish(
'__sapper__/export/',
{
branch: 'master',
repo: 'https://github.com/<user>/<repo>.git',
user: {
name: '<user-name>',
email: '<email-adress>'
}
},
() => {
console.log('Deploy Complete!')
}
)
I have a simple monolithic application generated using JHipster v4.10.1 with front-end using Angular 4.x. To run JavaScript unit tests, as suggested in the documentation I ran
./node_modules/karma/bin/karma start src/test/javascript/karma.conf.js --debug
The command runs the tests, reports coverage summary and exits, whether tests all pass or some test fail does not matter. Test run output does show at one point that the debug server is loaded:
21 11 2017 13:41:20.616:INFO [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/
But because the command exits, the Karma debug server can not be accessed. How to run tests so that Karma console can be used in browser to debug?
Figured out that the magic flag is actually single-run which seems to be true by default. So the main command to run for JS debug is:
yarn test --single-run=false
which in turn runs
$ karma start src/test/javascript/karma.conf.js --single-run=false
With this the command will only exit with explicit kill e.g. with Ctrl+C or Z. Karma debug console can then be accessed on http://localhost:9876/debug.html (assuming default port is not already busy. If it is, test output should tell you which port was chosen).
Additionally you need to disable minimization (and also istanbul config - not sure why) so that you can breakpoint and step through the .ts code in debugger easily. I figured this is done by making following changes in webpack/webpack.test.js file:
Remove following istanbul config from module.rules array:
{
test: /src[/|\\]main[/|\\]webapp[/|\\].+\.ts$/,
enforce: 'post',
exclude: /(test|node_modules)/,
loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true'
}
Add minimize: false to the LoaderOptionsPlugin under plugins array:
new LoaderOptionsPlugin({
minimize: false,
options: {
tslint: {
emitErrors: !WATCH,
failOnHint: false
}
}
})
When I do some setup on my test suite, I sometimes need to debug the produced html file.
The good thing is, there is a debug feature:
In order to do that, I run karma start --no-single-run.
But on every file change I make, I need to kill the process and restart it, otherwise, cached files are served:
How can I prevent the server from caching in this specific situation? Anyways, most of the time I run in single-run mode so caching hasn't much interest for me.
Thanks
--auto-watch may help:
karma start --no-single-run --auto-watch
If you change some files, karma-runner will reload (and cache) them, then it will run tests again automatically. If you refresh debug.html page after that, you will get a new version of these files without restarting karma-runner.
If you have this issue when running the tests in IntelliJ have a look at this workaround.
function runTests() {
var serverPort = cli.getServerPort();
var urlRoot = cli.getUrlRoot() || '/';
if (urlRoot.charAt(urlRoot.length - 1) !== '/') {
urlRoot = urlRoot + '/';
}
runWithConfig({
port: serverPort,
refresh: false, // set this flag to true
urlRoot: urlRoot
});
}
It's a known, not yet fixed issue in the karma-intellij plugin.
Trying to have an e2e test to test my server and it's UI on TraviCI. I'm however not able to come up with the necessary configuration in order to run all the components and access seleniumServer on BrowserStack.
I am able to get my session started, but when launching a browser to https://localhost:3000/login I see that the browser shows a page not found. If I manually run the ./BrowserStackLocal tool and use browserstack to access my localhost, I can do so no problem.
Here are my files:
./travis.yaml
....
addons:
browserstack:
username: "<my username>"
access_key:
secure: "<secure key goes here>"
config.js
var browserstack = require('browserstack-local');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'specs/*.js'
],
'seleniumAddress': 'http://hub.browserstack.com/wd/hub',
'capabilities': {
'browserstack.user': '<my username>', //<<--- I also had a version without these properties for browserstack, and that didn't work either
'browserstack.key': '<my key>',
'browserName': 'chrome',
'acceptSslCerts': true,
'browserstack.debug': true,
'chromeOptions': {
'excludeSwitches': ["disable-popup-blocking"]
}
},
baseUrl: 'https://localhost:3000/',
rootElement: 'div[ng-app]',
framework: 'jasmine',
jasmineNodeOpts: {
defaultTimeoutInterval: 30000
},
// Code to start browserstack local before start of test
beforeLaunch: function(){
console.log("Connecting local");
return new Promise(function(resolve, reject){
exports.bs_local = new browserstack.Local();
exports.bs_local.start({'key': exports.config.capabilities['browserstack.key'] }, function(error) {
if (error) return reject(error);
console.log('Connected. Now testing...');
resolve();
});
});
},
// Code to stop browserstack local after end of test
afterLaunch: function(){
return new Promise(function(resolve, reject){
exports.bs_local.stop(resolve);
});
}
};
Since you are testing your local/private environment on BrowserStack Automate you have to follow these steps:
1) Create the Local Testing connection via the BrowserStackLocal Binary.
2) Add the capability 'browserstack.local' : true in your config file.
I do not see the capability in the config.js file. Add the capability and things should work.
Your script looks similar to the one here.
I ran into this same problem myself recently. First, Ashwin is right that you need to add 'browserstack.local' : true to your protractor config file. Next you need to add "browserstack-local": "^1.3.0" to package.json under devDependencies. This is required for the Browserstack Local binary to be installed on your build server.
package.json:
...
"devDependencies": {
"browserstack-local": "^1.3.0"
}
Beyond that, it is not a problem with the config/setup. Rather, it is how you kick off the tests that affects the port your app is served on.
The reason it works when you run with the local binary is because your app is started on http://localhost:3000.
But when you build and run the app via Travis (by running ng e2e or similar), it actually starts your app on a different port (refer to this post for more on the angular ports). You can confirm this by looking at the console log, it should start with something like this:
> ng e2e
** NG Live Development Server is listening on localhost:49152, open your browser on http://localhost:49152 **
In the example above, it started on port 49152. So now if you have localhost:3000 hardcoded somewhere in your test spec, it won't find anything there. To fix this, in your test spec file, instead of browser.get('http://localhost:3000/login'), try browser.get(browser.baseUrl + '/login').
I realize this answer is probably too late for you, but hopefully it will be helpful to others.
So I'm struggling to setup a mock unit test for my Angular controllers via Protractor. Reason ? It's because I can't figure how to inject Angular mocks into my tests.
Using Karma runner, I have succeeded in setting this up, due to clear examples re: karma.conf.js; however, I need to run full e2e tests with Protractor - and I will need to inject angular controllers.
Here's an example online which demonstrates both Karma unit testing and Protractor e2d testing. https://github.com/mjhea0/angular-testing-tutorial/tree/master/tests
In karma.conf.js, you can use the files: [ ... ] property to specify angular-mocks.js, etc. However, in protractor.conf.js there seems to be no such thing.
Take this example that from git repo above :
beforeEach(function () {
module('myApp');
});
beforeEach(inject(function ($controller, $rootScope) {
$scope = $rootScope.$new();
controller = $controller('TestOneController', {
$scope: $scope
});
}));
This works when running the unit test with Karma, but how to run this with Protractor ?
It uses module() and inject(), but that using angular-mocks.js. Would I use require() to make this happen ?
Or is it somewhere along the lines that this post discusses ? http://blog.ng-book.com/how-to-mock-http-requests-in-protractor/
Advice and guidance is appreciated...
Bob