Exploring the capabilities of Angular Scenario for testing any webpage

Is it possible to use the angular scenario tester (and karma) to test any web page, regardless of whether it contains angular source code?

Or is it exclusively designed to work with angular source code?

In simpler terms, is it a generic tool that's not strictly tied to angular?

I've been developing an angularJs app with yeoman and I appreciate the way e2e testing is done with ngResource.

Now, I have another application built with dojo (not angular) and I'm interested in testing it in a similar way.

Do you think this is feasible, and if so, what would be your advice on how to go about it?

Thank you!

It's worth mentioning that the web page being tested may or may not contain angular code, which is why this question is relevant. Tools like casperJs or selenium are agnostic to the javascript technology used in the page.

Answer №1

It's actually quite simple. All you need to do is:

1/ Start by installing karma

npm install -g karma

2/ Next, install the necessary dependencies for ng-scenario and karma-ng-scenario

npm install ng-scenario

npm install karma-ng-scenario --save-dev

3/ Then, you need to create or modify the karma e2e configuration if you require a proxy. This is usually the case as dojo runs on a different server than karma. In this scenario, you specify a specific port for karma and set up a proxy to your server. Below is an example of how your configuration could look like:

module.exports = function(config) { config.set({ // base path, that will be used to resolve files and exclude basePath: '',

// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['ng-scenario'],

// list of files / patterns to load in the browser
files: [
   'https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js',
  'test/e2e/**/*.js'
],

// list of files / patterns to exclude
exclude: [],

// web server port
port: 8033,

runnerPort : 9100,

// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,


// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,


// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['Chrome'],


// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false,

// Uncomment the following lines if you are using grunt's server to run the tests
proxies: {
   '/': 'http://localhost:8080/'
}, //    URL root prevent conflicts with the site root
urlRoot: '_karma_'   }); };
  1. Finally, execute karma with the end to end configuration
karma start karma-e2e.conf.js

And there you have it, your code is now set up for successful testing :)

describe ( 'Publications', function ()
{
   beforeEach (
      function ()
      {
         console.log ( "before each" );
         browser ().navigateTo ( "yourPageToTestUrl" );
      }
   );

   it ( 'should filter results', function ()
   {
      expect ( repeater ( '.Publication' ).count () ).toEqual ( 4 );
   } );

} );

Answer №2

It is important to understand that while some test code may be successful (like counting elements), other code may not work as expected (such as manipulating an input not recognized by Angular).

For those looking to make ngScenarios compatible with any JS tool, there is a helpful tool available:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The animation function occasionally halts unexpectedly at a varying position

I am facing an issue with an animation function that I have created to animate a list of images. The function takes in parameters such as frames per second, the stopping point, and the list element containing all the images. However, the animation stops un ...

The scrollTop feature fails to function properly following an Axios response

I'm currently facing a challenge with creating a real-time chat feature using Laravel, Vue.js, Pusher, and Echo. The issue arises while implementing the following 3 methods: created() { this.fetchMessages(); this.group = $('#group') ...

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

Currently, I am attempting to implement the code for ramjet from . However, I am facing an issue where element a does not disappear when transitioning into b. Additionally, I am encountering an error message "--Uncaught TypeError: Cannot read property &apo ...

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...

Is it possible to verify the user's authentication by confirming the presence of a JWT in their localStorage?

I am currently working on a project that requires JWT authentication. I have set up a registration form and login page where users receive an authorityToken and it is saved in localStorage. Once the user logs into their account : ` $("#btnLogin").click( ...

A collection of asynchronous requests stemming from a sole request

I am facing a unique ajax scenario that is proving to be quite challenging for me. Here is the specific sequence of events that I need to coordinate: An initial request returns an array of ID numbers. A separate request needs to be sent for each ID in ...

Retrieving data from the array properties in a JSON object

I am facing a challenge with an array of elements, each element is quite complex as it contains nested arrays as properties. My goal is to extract specific attributes from these elements, but I have been struggling to achieve this using the forEach functio ...

Tips for retrieving data from a nested Axios request?

Currently, I am working on a series of steps: Phase 1: Initiate an Axios call to verify if the record exists in the database. Phase 2: In case the record does not exist, trigger a POST API call to establish the data and retrieve the POST response. Pha ...

Dynamically update a directive array in Vue.js based on real-time changes

In my Vue project, I have an array defined in the data() method that is populated through a custom directive in its bind hook. Here's the code snippet: import Vue from 'vue' export default { el: '#showingFilters', name: "Filte ...

Sharing data between two components on the same level in Vue.js

I have a situation where I need to transfer data from one component1 to another component2. I am not utilizing vuex or router for this task. The component tree looks like this: -Parent --Component1 --Component2 In the first component1, I am sending an ...

Unable to fetch the number of items for ng-repeat pagination

I am currently working on setting up pagination within my ng-repeat template. I came across a code snippet on How to do paging in AngularJS?, which led me to this jsfiddle example: http://jsfiddle.net/dalcib/J3fjc/. My implementation closely resembles the ...

Exploring the Differences Between NPM Jquery on the Client Side and Server

I'm still getting the hang of node and npm, so this question is more theoretical in nature. Recently, I decided to incorporate jQuery into my website by running npm install jquery, which placed a node_modules directory in my webpage's root along ...

Issue with ExpressJS Regex not correctly matching a path

I'm currently struggling with a simple regex that is supposed to match words consisting of letters (0-5) only, but for some reason it's not working as expected. Can anyone help me figure out the correct expression and how to implement it in Expre ...

Using jQuery to select a specific checkbox from a group of checkboxes with identical IDs

There is an issue with multiple checkboxes having the same ID in an asp.net repeater control. Users can select either email or phone against each record in the repeater rows. In the example below, there are two rows. If you select the email icon in the fi ...

Error encountered: Unable to access the 'Lastname' property as it is undefined

Even though the console displays the value of $("#surname").val(), I am still encountering an error. Could it be that the script is executing before the form is dynamically built? $(function () { $("#addEmployeForm").submit(function (event) { ...

Issue with BCRYPTJS library: generating identical hashes for distinct passwords

After conducting a thorough search on Google, I couldn't find anyone else experiencing the same issue. The problem lies in the fact that no matter what password the user enters, the system returns the hashed value as if it is the correct password. Eve ...

The mongoose fails to establish a connection with the Mongo Db Atlas

I am having issues with my simple node express app when trying to connect to MongoDB atlas. Despite deleting node_modules and re-downloading all packages, I am still encountering the same error. The specific error message reads as follows: Cannot read pro ...

What is the best way to incorporate CDN into my webpack build process?

I have developed a module with the following code: export default () => console.log('hello my_module~!') The configuration in the webpack.config.js file looks like this: module.exports = { // ... output: { // ... library: 'he ...

How can one decrease the size of a React project?

After running npx create-react-app my-app, the download was quick but then it took over an hour for the installation process to complete. Upon checking the size of the newly installed project, I found that the node_modules folder alone was a whopping 4.24 ...

Tips for ensuring the Google+ JavaScript tag is W3C compliant

I have a Google+ button on my website that is functioning properly. However, when I run it through the W3C validator, an error is detected: The text content of the script element does not meet the required format: It was expecting a space, tab, newlin ...