CasperJs was unable to locate the CSS selector after transitioning from jade to pug, causing the test to fail

After transitioning my templates from jade to pug, all of my CasperJS tests started failing. The majority of the errors are related to the css selectors that cannot be found. Below is an example of the issue:

CasperJS test: 

casper.thenOpen("http://localhost:8080/activites/E5555", function() {
    this.wait(5000, function() {
      this.click("a.open-user-dialog");
    });
  });

And here is the pug code for the element in question:

p
    i.fa-icon-plus.fa-icon-success 
    strong: a.open-user-dialog(href="#user-dialog", data-toggle="modal") Add user

This is the result of the test:

FAIL Cannot dispatch mousedown event on nonexistent selector: a.open-user-dialog

Any assistance with resolving this issue would be greatly appreciated.

cssbootstrap-4pugcasperjs

Answer №1

After some trial and error, I finally found the solution: By adding casper.wait(2000, function(){}); before loading the page, the issue was resolved.

casper.wait(2000, function(){});
casper.thenOpen("http://localhost:8080/activities/E5555", function() {
    this.wait(5000, function() {
      this.click("a.open-user-dialog");
    });
  });

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

Manage the individual style properties for the background images of a single div

I have a DIV that I would like to have 2 or more background images displayed. In the DIV class, I defined a style with two image URLs: .manyImages { background: url(/a1.png), url(/a2.png) no-repeat; } <div class="manyImages"> </div> My ...

javascriptjqueryhtmlcss

The layout of my page does not adjust properly in Google App Script, particularly on mobile devices and when not in landscape mode

I recently developed a webpage with a form that scaled perfectly in Chrome. However, after integrating a Google App Script page, I noticed the scaling issue on mobile devices. It only works in landscape mode on mobile and functions properly in Firefox. Th ...

google-apps-scriptweb-applicationsbootstrap-4viewportmeta-tags

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

cssangularprimeng

Expanding beyond the maximum width in a two-column layout (using TAILWIND CSS)

Before I pose my question, let me quickly go over the relevant code: The Homepage Component const Home = () => { return ( <div> <div> {questions.map((question) => ( <div key={question.id} className=" ...

javascriptcssreactjslayouttailwind-css

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

I am currently working on developing a dynamic pagination bar. This pagination bar will dynamically clone the "li" elements based on a number received from an external webservice. Here is the structure of my pagination element: <ul class="pagination"& ...

javascriptjqueryhtmlcss

Choose the correct checkbox among several options

On my webpage, I am facing an issue with checkboxes. No matter which checkbox I click on, only the first one is getting checked. I can't figure out what the problem is. Initially, the checkboxes weren't showing as checked, but now only the first ...

htmlcssformscheckboxlabel

Styling Borders in CSS/HTML

Having an issue with the CSS on my website, specifically when hovering over links in the navigation bar. I'm trying to add a border around the link when hovered over, but it's causing the other links to shift position. Here's what I have so ...

htmlcssborder

Choosing the ID and class name through jQuery among numerous classes

I am looking to create a Modal Pop Up Box using CSS and JS, but I need help getting the id (mymodal , mybtn) and the Class (close) from the span Element in JavaScript. Please refer to the attached link for an explanation of the code. div class="head ...

javascripthtmljquerycssbootstrap-4

Finding the dynamic width of a div using JavaScript

I have two divs named demo1 and demo2. I want the width of demo2 to automatically adjust when I drag demo1 left to right or right to left. <div class="wrapper"> <div class="demo"></div> <div class="demo2"&g ...

javascriptjquerycssresizablejquery-ui-resizable

When you hover over the text, a new div will appear

Check out this code snippet on CodePen HTML <div class="boxes"> </div> <div class="hoverover"> hello </div> CSS .boxes { background-color: yellow; height: 100px; width: 200px; display: none; } .hoverover:hover .boxes { ...

css

The CSS isn't loading properly once the file is uploaded to the server using FileZilla or cPanel

After uploading the file.css file to the server using both FileZilla and cPanel, I noticed that when I visit the website, the CSS is not being applied properly. Specifically, I changed padding-left: 10px; However, upon viewing the Page source, it appears ...

csscpanelfilezilla

How to Change Text When Accordion is Expanded or Collapsed using Javascript

Help needed with JavaScript accordion menu for displaying indicators in front of section headers. The goal is to show a (+) when collapsed and (-) when expanded. The current code only changes on click, not based on the section's state. Looking for fre ...

javascriptcssaccordion

How to eliminate spacing between photos in a flexbox layout

[Unique] Find the Solution Image inside div has extra space below the image My design showcases various images of different sizes in multiple rows. See an example here. Despite my efforts, there are noticeable gaps between the rows that I can't seem ...

cssvue.jsduplicates

Implementing dynamic styles for a checked mat-button-toggle in Angular 6

How can I customize my button-toggle when it is checked? The current code I have doesn't seem to be working... This is the code snippet: <mat-button-toggle-group #mytoggle (change)="selectoption($event)" value="{{num}}"> <mat-bu ...

htmlcssangulardynamicstyles

Is there a way to align an image to the center using the display grid property?

Having some trouble centering an image within a 'display: grid' layout. Screenshot I attempted to use 'align-items' but it didn't seem to work either. Code: <section style="padding-top: 30px;"> <h4 sty ...

htmlcss

Guide to importing scoped styles into a <NextJS> component

When importing a CSS file, I usually do it like this: import './Login.module.css'; In my component located at components/login/index.js, I define elements with classes such as <div className="authentication-wrapper authentication-basic ...

javascriptcssnext.js

What is the best way to maximize the width of this element?

Check out my website: There's a div styled with the color #D9D9D9 This is the CSS code: #full_bar { background: #D9D9D9; width: 100%; height: 100px; } I want the div to span across the full width of the website and be stuck to the footer. An ...

htmlcsswordpress

What is the best way to show the initial image within every div that has the class name .className?

I am looking to only show the first image in each div with the class name "className." This... <div class="className"> <p>Yo yo yo</p> <p><img src="snoop.jpg" /></p> </div> <div class="className"> Hel ...

javascriptjqueryhtmlcss

Is there a way to reorganize the layout of a container on mobile using this code?

Is it possible to rearrange this code for mobile view? Currently, on desktop, the <div class="grid4-12"> (left) and <div class="grid8-12"> (right) are stacked on top of each other. How can I adjust the code so that on a r ...

htmlcss

Issue with visibility of Bootstrap modal title

The title in the modal isn't visible. Even when I highlight it with a mouse, it still doesn't show up. I attempted to add modal-content color: #000, but unfortunately, it had no effect. As of 01/11/16 1:28PM CST, none of the responses and answe ...

htmlcsstwitter-bootstrapbootstrap-4