Tap on the hyperlink within the pop-up window

Having trouble clicking on a link from a popup. Once I click on the button, the popup appears for approximately 3 seconds:

<toast-container class="ng-tns-c12-31 ng-star-inserted">
<div class="toast-top-center" id="toast-container" style="position: fixed;">
  <!----><div class="toast toast-info ng-star-inserted ng-animating">
    <!----><div class="toast-close-button ng-tns-c12-31 ng-star-inserted" style="">×
    </div> 
    <!---->
    <div class="ng-tns-c12-31">
      <!----><span class="toast-message ng-star-inserted" style="">The section will be removed. <a class="toast-link">Cancel</a></span>
      <!---->
    </div>             
  </div>
</div>
</toast-container>

I attempted to click on "Cancel" using

element(by.partialLinkText('Cancel'))

as well as

var cancelLink = $('#toast-container a');
browser.executeScript("arguments[0].click();", cancelLink)

However, the link did not register the click. Unsure of how to validate the assertion on this popup

var toastMessageBox = $('#toast-container');
    this.assertClearSelectionToastMessage = function () {
        expect(toastMessageBox.$('span').getText()).toBe(toastText)
        return this;
    }

Answer №1

Perhaps a solution could be to simulate a click on the link using the Webdriver Actions builder?

You could try something like this:

browser.wait(protractor.ExpectedConditions.visibilityOf(element(by.css('a.toast_link'))), 5000);
driver.actions().click(element(by.css('a.toast_link'))).perform();

The downside to this approach is that it may only work on desktop browsers at the moment - as it has not been integrated into Appium yet. If you need to test on mobile browsers, you may need to find a different solution.

Answer №2

If the popup hasn't fully loaded yet, the link won't be visible and therefore cannot be clicked. Patience is key as you wait for the popup to appear.

It's not uncommon for an element to be clickable but clicking on it yields no result.

For more information, check out:

@Jonny Leeds highlighted an important point:

One key factor to consider is whether a button is Enabled. Sometimes you can click on them and nothing will happen because the element is present but not yet activated for clicking.

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

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is it possible to restrict HTML5 Drag & Drop functionality between different browsers or windows? I am currently working on an Angular2 app that utilizes native HTML5 Drag and Drop feature. Is there a way to prevent users from dragging items out of th ...

Decoding the Language of HTTP Status Codes

Let's imagine a scenario where I create a file called api.js: const {somefunction} = require('../controllers/some-controller'); app.get('/data/', somefunction); In my some-controller.js: exports.somefunction = async (req, res,next ...

Having trouble with Vue 3 Component State not updating following an asynchronous operation?

Encountering challenges in my Vue 3 app when trying to update a component's state post an asynchronous operation. Here's what's happening: Within a component, there is a method called containerMoveHere that utilizes Socket.io for an async o ...

Error encountered in NEXT JS: Unable to parse URL from /api/projects or Error message: Failed to connect to 127.0.0.1:3000

Currently utilizing: export const getStaticProps = async () => { export const getStaticPaths = async () => { and accessing my API (pages/api/projects/) created with Next.js on my local host const res = await fetch("http://localhost:3000/api/ ...

"Vercel encounters a read-only file system when trying to change file

Hey folks, I've been using vercel for deploying my project. There's an issue with one of the dependencies in my NextJS project, which is located inside the node_modules folder. This dependency is supposed to read and write files within its own di ...

Retrieve the Firepad textarea element or the current character being typed

I'm looking to add hashtag functionality to Firepad using jQuery. Is there a way to access the textarea element or the character being typed in the Firepad editor? For example, can I trigger an event when typing '#'? I attempted to use the ...

Having trouble with Node.js executing commands in the console

I've been following some tutorials on YouTube to learn how to create a real-time chat using Node.js from the phpacademy channel. Currently, I'm stuck at the step where I need to run my server.js file in the console. When I enter the command ...

Tips for transferring parameters to functions within middleware

Attempting to pass a parameter to a middleware has presented some challenges for me. Within the routes' handler, I have the following function: router.get('/users', auth.required, userController.findAll); This function then leads to the a ...

Attempting to retrieve an array within a Mustache JavaScript template

I'm attempting to retrieve data from a mustache array using this.location.coordinates.0: <div class="block"> <label>Location (longitude/latitude):</label> {{location.coordinates.0}}/{{location.coordinates.1}} </d ...

Obtaining an array element from mongoose at the corresponding index of the query

My Schema looks like this: const PublicationSchema = mongoose.Schema({ title: { type: String, required: true }, files:[{ contentType: String, data: Buffer, name: String }] }) I am attempting to re ...

Checkbox column within GridView allows users to select multiple items at once. To ensure only one item is selected at a

Currently, I am facing a challenge with dynamically binding a typed list to a GridView control within an asp.net page that is wrapped in an asp:UpdatePanel for Ajax functionality. One of the main requirements is that only one checkbox in the first column c ...

c# JavaScriptConverter - understanding the deserialization of custom properties

I'm facing an issue where I have a JSON serialized class that I am trying to deserialize into an object. For example: public class ContentItemViewModel { public string CssClass { get; set; } public MyCustomClass PropertyB { get; set; } } Th ...

Could someone please explain how to obtain a compiled string within an AngularJS directive?

Check out the following code snippet for my custom directive: mymodule.directive("test", function($compile) { return { restrict: 'E', replace: true, template: '<div data-date="{{avail}}"></div>', ...

Change the name of a file to a name chosen by the user while uploading it to an

I'm a beginner when it comes to node.js and I'm facing an issue that I couldn't find a solution for despite looking into various related topics. My problem involves using Node.js on the server side to upload a file and rename it based on a ...

"Enhancing security measures with multiple nonce for Content Security Policy

I am encountering an issue with my single page application, which is developed in .net core MVC 2.2. The application loads html sections on the fly. In the main document, I have added a Content Security Policy (CSP) policy with a dynamically generated hea ...

"The TextInput component in ReactNative is preventing me from inputting any text

Experiencing issues with the iOS and Android simulators. Upon typing, the text disappears or flickers. I attempted initializing the state of the texts with preset values instead of leaving them empty. However, this caused the TextInput to stick to the ini ...

The Javascript navigate method has detected an incorrect language being used

Currently, I am facing a challenge while developing a React JS website related to the navigator issue. Even though my default browser is Chrome and English is set as the language preference, when I check navigator.language it displays "he-IL" instead of En ...

Themeing for dark mode using styled components in Next JS

I have been searching for an answer to this question, but haven't found one yet Currently, I am using styled components with next js along with the use-dark-mode hook to manage theme changes and detection The global styles switch seems to work fine ...

The animation feature on the slideshow is dysfunctional

For this Vue component, I attempted to create a slideshow. The process is as follows: 1) Creating an array of all image sources to be included (array: pictures) 2) Initializing a variable(Count) to 0, starting from the beginning. 3) Adding v-bind:src=" ...

How to retrieve the value from a JSON object when the key is unknown in JavaScript

Here is the JSON file I'm working with: { "status": 200, "msg": "OK", "result": { "files": { "count": 1, "pUnJbKzql0f2": { "name": "How ...