Navigate to the date selector and select the following month

<button class="mat-calendar-next-button mat-icon-button" mat-icon-button="" type="button" ng-reflect-disabled="false" aria-label="Next month"><span class="mat-button-wrapper"></span><div class="mat-button-ripple mat-ripple mat-button-ripple-round" matripple="" ng-reflect-centered="true" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"></div><div class="mat-button-focus-overlay"></div></button>

... [Calendar data contents] ...

I am experiencing difficulty clicking on the 'Next Month' button and selecting a date from this calendar while it's within a dialog pop-up. The dialog pop-up can be identified using element(by.css('.mat-dialog-container')). Any advice or guidance provided would be greatly appreciated!

javascriptangularjsprotractorautomated-testse2e-testing

Answer №1

Here is a helpful snippet to interact with a calendar in Protractor:

 const EC = protractor.ExpectedConditions;

        const datePickerToggle = element(by.tagName('mat-datepicker-toggle'));
        browser.wait(EC.visibilityOf(datePickerToggle), 50000);
        datePickerToggle.click();
        const nextButton = element(by.className('mat-calendar-next-button'));
        browser.wait(EC.visibilityOf(nextButton), 50000);
        nextButton.click();

Answer №2

1. Familiarize yourself with the webtable concept first. I recommend starting by reviewing Mukesh Otwani's tutorial on handling dynamic calendars before proceeding here. 2. Click on the calendar icon. 3. Navigate to the desired link. 4. Select the date from the calendar. Avoid using element.all to iterate through and select the date, as it may result in a stale element reference error. 5. Refer to Protractor's official website for guidance on using filters to click on an element instead of iterating through each one individually. 6. When passing the date as an argument, ensure you do not hardcode it. Give this approach a try, but if unsuccessful, I can provide you with code to help resolve the issue.

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

Ways to invoke a JavaScript function via a hyperlink. Various techniques to achieve this task

I want to create a div with the id of slider, and I am looking for a way to animate or hide it when a link is clicked. Specifically, I would like to toggle it open and close using a link. Javascript solution <script type="text/javascript"> ...

javascriptjquery

The controller is not receiving the isolated scope value

I have implemented angular-slider.js on a webpage where a server request is triggered upon changing the slider's value. I am looking to delay this action until the user releases the mouse button, specifically during onmouseup event. Incorporating thi ...

javascriptangularjs

Is there a way to add an entire array of child nodes to a parent node in a single operation using JavaScript?

Is there a quick way in JavaScript to attach an array of child nodes to a parent node all at once? I'm looking for a method that will avoid triggering unnecessary repaints. So far, I attempted using parent.appendChild(arrayOfNodes), but it resulted ...

javascript

Is there a way to have a span update its color upon clicking a link?

I have 4 Spans and I'm looking to create an interactive feature where clicking a link in a span changes the color of that span. Additionally, when another link in a different span is clicked, the color of that span changes while reverting the previous ...

javascriptjqueryhtmlcss

Avoiding an event from spreading in Angular

I am working on a navigation setup that looks like this: <a (click)="onCustomParameters()"> <app-custom-start-card></app-custom-start-card> </a> When the user clicks on the app-custom-start-card, the onCustomParame ...

javascriptangulartypescriptangular-router

Displaying live data from an XMLHttpRequest in a Vue component in real-time

I'm currently working on implementing lazy loading for a list of posts fetched from the WordPress REST API. My goal is to load additional news stories upon clicking an HTML element. However, I'm facing issues with accessing the original Vue inst ...

javascripthtmlwordpressvue.jswordpress-rest-api

Rendering images from Laravel's storage folder in a React component

When uploading an image from a React frontend to a Laravel backend, I encountered an issue where the uploaded image path was saved in the database but the image wouldn't display. React code ` useEffect(() => { axiosClient .g ...

javascriptphpreactjslaravel

What language should be used for JSON data formats?

I am dealing with a JSON file named myjson.cfg that has the following structure: { "values": { "a": 1, "b": 2, "c": 3, "d": 4 }, "sales": [ { "a": 0, "b": 0, "c": 0, "d": 0, ...

javascriptjsonsyntax-error

Utilizing HTTPS for OpenWeatherMap API in JavaScript encounters obstruction

I'm currently working on a project with free code camp where I am attempting to create a weather app using the OpenWeatherMap API. However, I have encountered an issue. My project needs to be submitted on Codepen and use HTTPS for geolocation. Due to ...

javascriptapiopenweathermap

How can I retrieve the value from req.body following an AJAX POST request on the server side with Express?

Currently, I am utilizing AJAX to send JSON data: app.use(express.json()); app.use(bodyParser.urlencoded({extended:true})) app.use(express.urlencoded({ extended: true})); const rowObject=JSON.stringify(rowData) $.ajax({ type: "POST&q ...

javascriptnode.jsjsonajaxreq

Error encountered while compiling a method within a .vue component due to a syntax issue

I have been closely following a tutorial on Vue.js app development from this link. The guide instructed me to add a login() function in the block of the Login.vue file. Here is the snippet of code provided: login() { fb.auth.signInWithEmailAndPa ...

javascriptvue.jswebpackvuejs2vue-component

Create movement in line art using the position of the cursor

I have created a skull lineart in illustrator and I am trying to make the lines fill in or erase based on mouse position. There are two possible ways to achieve this: Using lazy line painter to draw the lines and then finding a way to animate based on ...

javascriptjqueryanimationmouse-position

What is the process for accessing an uploaded file in a server-side Classic ASP page?

I'm attempting to use Ajax to upload a file to a server-side script in classic ASP. Here is the relevant HTML and JavaScript code: <input type="file" id="fileInput" /> and function saveToServer(file) { const fd = new FormData(); fd.a ...

javascriptajaxasp-classic

Exploring portfinder in Javascript: A guide to its usage

As a newcomer to Javascript, I am eager to figure out how to utilize the portfinder.getPort() function within one of my functions in order to generate a random port each time. The code snippet below showcases my current implementation: var portfinder = re ...

javascriptnode.jsport

How to troubleshoot Javascript code that fails to identify if a color is white

What could be causing my code to malfunction? I am attempting to determine if the paragraph text color is white (as determined by CSS settings). If it is indeed white, I want to change it to black for better visibility. function adjustColor() { if (d ...

javascripthtmlcss

Can child components forward specific events to their parent component?

I created a basic component that triggers events whenever a button is clicked. InnerComponent.vue <template> <v-btn @click="emit('something-happened')">Click me</v-btn> </template> <script setup lang=" ...

javascripttypescriptvue.js

What is the best way to link to this list of options?

#episode-list { padding: 1em; margin: 1em auto; border-top: 5px solid #69c773; box-shadow: 0 2px 10px rgba(0,0,0,.8) } input { width: 100%; padding: .5em; font-size: 1.2em; border-radius: 3px; border: 1px solid #d9d9d9 } <div id="epis ...

javascripthtmlcss

Executing two Ajax calls sequentially without using asynchronous functionality

Creating a dynamic menu using two REST APIs to establish a parent/child relationship. The ID of the parent from the first API response is passed to the child API to fetch child records. Encountering issues where setting async false for the child API call ...

javascriptjqueryajax

Passing props from a parent component to a nested child component in Vue 3

My goal is to achieve the functionality described in the title. Suppose I have the following structure: parent -> child -> secondChild Currently, there is a variable called isActive in the parent component. Below is how it can be implemented: paren ...

javascriptvue.jsvuejs3

Transforming JSON data into a visually appealing pie chart using highcharts

I'm having trouble loading my JSON string output into a highcharts pie chart category. The chart is not displaying properly. Here is the JSON string I am working with: var json = {"{\"name\":\"BillToMobile\"}":{"y":2.35},"{\ ...

javascriptjavajsonchartshighcharts