Nested within an it block are Protractor Jasmine describe blocks

Initially, the code provided below appears to be functioning properly. However, I have not come across anyone using this method before, leading me to question its validity and potential unforeseen drawbacks.

The scenario involves writing an end-to-end test with Protractor utilizing Jasmine-style describe/it blocks. The objective is to load a page and execute a series of it test blocks without having to reload the page each time (due to the time it consumes).

The structure I have implemented is as follows:

describe("Homepage", function () {

    beforeEach(function () {
        browser.get("/"); // loads the page
    });

    it('elements', function () {
        describe('test group', function () {
            it('test 1', function () {
                // perform action 1
            });

            it('test2', function () {
                // perform action 2
            });
        })
    });
});

It is noted that an alternative approach could simply be:

describe("Homepage", function () {

    beforeEach(function () {
        browser.get("/"); // navigates to the homepage
    });

    it('elements', function () {
        // perform action 1
        // perform action 2

    });
});

However, the challenge arises where tests cannot be separated, resulting in a large consolidated it block. It is desired to circumvent running beforeEach every single time while still maintaining neatly organized test blocks.


Furthermore, an attempt was made with the following format:

describe("Homepage", function () {

    browser.get("/"); // navigates to the homepage

    it('elements', function () {
        // perform action 1
        // perform action 2

    });
});

Regrettably, this approach fails when multiple specs are involved. All instances of browser.get() run consecutively prior to executing the tests.

Answer №1

Dividing the assertions into smaller blocks is a smart approach worth considering. It seems that Jasmine lacks a global setup function that executes only once. A possible workaround could be to manipulate the beforeEach block so that it runs the setup only once:

describe("Homepage", function() {
    var pageLoaded = false;

    beforeEach(function() {
        if (!pageLoaded) {
            browser.get("/");
            pageLoaded = true;
        }
    });
});

Answer №2

Jasmine2 includes the beforeAll() and afterAll() functions that execute only once for the entire test suite.

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

Utilizing AngularJs to input new data entries into a form

I have been exploring AngularJS lately as a beginner and am currently working on creating a form that includes a 'create' button to generate a new server record using a service. Here is the Angular code I have written: $scope.createNewRecord = f ...

Failure to highlight items when using the multiple select function

After adding a select all button to a multiple select, I encountered an issue. Although all the items are being selected, they are not highlighted when clicking on the select all button. Below is the code snippet: <div class="label_hd">Profiles* {{ ...

Injecting a controller into an AngularJS module within an anonymous function

As a newcomer to the world of javascript and just beginning to work with angular.js, I have a question. I'm wondering if there is a method for injecting a controller into a module that is declared within an anonymous function. This is how my code cu ...

Retrieving API Data in React Using the MERN Stack

Can anyone help me understand why I'm logging an empty array [] in my console even though I'm getting results from my API? This is my Node.js code: app.get("/todos", async (req, res) => { const todos = await todo.find() res.json(todos ...

Employ CSS flexbox and/or JavaScript for creating a customizable webpage

I am in the process of developing a basic IDE for an educational programming language that has similarities to Karel the Dog. One major issue I am encountering is creating the foundation HTML page. The IDE consists of 4 main areas: Toolbox (contains but ...

How to implement dynamic color for classes in a v-for loop using Vue.js?

Struggling with a seemingly simple issue that may be easy for VueJS pros. In my data, I have JSON objects with an attribute that can take values of 10, 20, 30, or 40. Depending on this value, I want to change the color of a v-btn. I've attempted mul ...

Choosing a default selection in a nested v-for loop for a select box

Currently, I have a list of items that users can add new items to. Each item is required to have a select box, and the selected value from the select box should be assigned as the item's value. In an attempt to bind the select box to the item using t ...

Can a websocket be used to communicate with a server that is not the same as the one hosting the html5 website?

My goal is to establish communication between a hardware device and an HTML5 website. It seems like the best way to do this would be through WebSockets or possibly WebRTC over a WiFi network. Is that correct? I haven't come across any solutions invol ...

Running `grunt serve` with CORS enabled allows for cross

Our team utilizes grunt serve for live recompiling and reloading of our web application, allowing us to make edits and see changes in almost real-time. The webapp is built using AngularJS, which means that all interactions on the site are done through API ...

The process of loading the Facebook like script using $.getScript is causing an issue where the

How can I make the Facebook like button display properly on my HTML page? I have successfully loaded scripts and divs for Twitter, Google +1 buttons, but the Facebook like button script is not displaying the button. The alert shows that the script is exec ...

Close ui-bootstrap typeahead menu only when a row is manually chosen

I have set up this jsBin to show the problem I am facing. When you visit the link and try to type "Five," the expected behavior would be to type "Five" and then press tab. However, in this case, you need to type "Five" and then either escape or click outsi ...

Is there a method I can use to transform this PHP script so that I can incorporate it in .JS with Ajax?

I have a JavaScript file hosted on domain1.com, but in order for it to function properly, I need to include some PHP code at the beginning. This is necessary to bypass certain restrictions on Safari for my script by creating a session. The PHP code establi ...

Server Components can only receive plain objects and select built-ins from Client Components. Any classes or null prototypes will not be compatible

I am encountering an error when wrapping the App.ts with queryclientprovider: "Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported." Below is the code snippet from ...

Tips for using rspec to test front end functionality?

In my Rails project, I have incorporated Vue.js using only the core library. Currently, most forms in the project are developed with Vue.js. When testing front-end features like form filling or validations using feature tests in RSpec, I found it to be qui ...

There seems to be a hitch in the functioning of the JavaScript codes

I'm having trouble calculating the amount using jQuery. Could someone please review my code and let me know what's wrong? Here are my Javascript and jQuery codes: After making changes: $(document).ready(function() { $('.home_banner&ap ...

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

How can I use the Intersection Observer to load an H2 tag only when the image is visible on the page? Here is the JavaScript code I currently have: const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObser ...

The challenge of maintaining consistency in Vue 3 when it comes to communication between

Context In my Vue 3 application, there is a HomeView component that contains the following template structure: <InputsComponent></InputsComponent> <CheckboxesComponent></CheckboxesComponent> <Toolbar></Toolbar> T ...

Dynamically extract key values from JSON data and display them on an HTML page with checkboxes for selection. Generate a new JSON object containing

I am facing the challenge of parsing an unknown JSON with uncertain key-value pairs. As I do not have prior knowledge of the keys to access, my goal is to traverse through every key in the JSON and display all keys and their corresponding values on the scr ...

I need help figuring out how to showcase the following object in an Angular 5 HTML file

https://i.sstatic.net/XXm3W.png The console screenshot above shows an object with two values: users and tickers, each being an array of values. How can I display these values in an Angular 5 HTML template similar to the screenshot above? I attempted to ...

Reactjs Invariant Violation caused by the npm package (react-loader)

I'm currently attempting to integrate react-loader into my react component. This is the code snippet I'm using: /** @jsx React.DOM */ var Loader = require('react-loader'); var DisplayController = React.createClass({ // etc ...