In this particular test case, I want to click on the a tag, but I want the page to open up in the same tab, I don't want a new tab opening up.
I wrote the test case like this, but it is not working as a new tab opens up. Can somebody tell me what I am doing wrong?
cy.get("className").first().invoke("removeAttr", "href").click();
Assuming your Tag element has target=_blank which is why a new tab is opened every time you are clicking it. The simple solution would be to replace the target value from _blank with _self.
cy.get("className").first().should($a => {
$a.attr('target', '_self')
}).click()
You can't remove href because that has the target address.
Check out Cypress tips and tricks
Figure out what you want to test. You can for example verify the link has the expected address and attribute target=_blank and call it a day.
it('loads the about page', () => {
cy.visit('index.html')
cy.get('a').should($a => {
expect($a.attr('href'), 'href').to.equal('/about.html')
expect($a.attr('target'), 'target').to.equal('_blank')
})
})
We can also change the target attribute before clicking the link (but after confirming it to be blank). Then we can verify the second "tab" loads correctly.
it('loads the about page', () => {
cy.visit('index.html')
cy.get('a').should($a => {
expect($a.attr('href'), 'href').to.equal('/about.html')
expect($a.attr('target'), 'target').to.equal('_blank')
$a.attr('target', '_self')
}).click()
cy.location('pathname').should('equal', '/about.html')
})
A slightly different approach is given by pavelsman Clicking on Links That Open in New Tab
Blanking the target
cy.get('a')
.invoke('attr', 'target', '')
.click()
Using cy.request() to follow the link
cy.get('a')
.invoke('attr', 'href')
.then(link => {
cy.request(link)
.then(res => expect(res.status).to.equal(200))
});
Related
I was wondering if it is possible to add a message instead of showing the values when the interactions tests are run in storybook.
for example:
FilledForm.play = async ({ canvasElement }) => {
const buttonEl = getByRole('button')
await expect(buttonEl.textContent).toContain('some button text');
//this gives `expect('some button text').toContain('some button text')`
//would have been better if it gave: `expect textContent to contain 'some button text'`;
any clue if that is possible? FYI it is not a deal breaker for me, it a cheaper alternative to have the test-runner and it works on a case by case, just want to know if there is a way to put extra message when showing the test result.
I am writing e2e tests in NightWatch v2.1.3 using page objects.
There are list of items, and an item can be selected either by click or by hotKey of its index.
Example: second element can be selected by click or shift+2.
Following code i have written, taking reference from the docs, but it is not working
browser.perform(function () {
const actions = this.actions({async: true});
console.log('performing hotKeys');
actions
.click('#option1')
.keyDown(Keys.SHIFT)
.keyDown(Keys.NUMPAD2)
.keyUp(Keys.NUMPAD2)
.keyUp(Keys.SHIFT);
});
Console is happening but the click and keyUp, keyDown is not working, when kept inside the .perform method.
What need to be fixed here?
return keyword is important. (silly mistake here)
Use 'a', 'b', '1', '2' for normal keys (single quotes are important, even for numbers)
click is not working, inside actions api. Better use the api click instead of userActions click. No idea why this click is added under new user-actions. The documentations does not have enough examples, one need to find out through hit and trial method.
Example:
For SHIFT + 1
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown(Keys.SHIFT)
.keyDown('1')
.keyUp('1')
.keyUp(Keys.SHIFT);
})
.pause(2000);
For Shift + 10
(This depends on the way feature is developed, if app need both 1 and 0 to be pressed or not)
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown(Keys.SHIFT)
.keyDown('1')
.keyUp('1')
.keyDown('0')
.keyUp('0')
.keyUp(Keys.SHIFT);
})
.pause(2000);
// keyUp('10') wont work, it is not a valid key in your keyboard
For simple 'a'
(This depends on the way feature is developed, if app need both 1 and 0 to be pressed or not)
browser
.pause(3000)
.perform(function () {
const actions = this.actions({ async: true });
return actions
.keyDown('a')
.keyUp('a')
})
.pause(2000);
Is it possible listen for a popup triggered with window.open? I don't care about whats inside the window, I just want to expect it to open. In Cypress it would be something like this
cy.window().then((win) => {
cy.stub(win, 'open', () => {}).as('popup');
});
button.click(); // triggers the `window.open`
cy.get('#popup').should('be.called');
I can't quite find something like this for WebdriverIO.
browser.getWindowHandles().length
this will give number of windows or tabs opened currently . use length >1 to validate window is opened
I am using echarts to visualize multiple line-charts. When I click exactly on a datapoint I am able to select a specific line chart. However If I click elsewhere on the line, where there in no datapoint associated, the chart in not selected. I know there is a focus feature by hovering the mouse. I want the same functionality using the click event.
I am using the following method, but I am not sure how to implement it.
myChart.getZr().on('click', params => {
//to be implemented
})
Here is the configuration example for the hovering effect on echarts:
https://echarts.apache.org/examples/en/editor.html?c=multiple-x-axis
I solved this with filled-area
I put areaStyle: {} in series' option
then add the following event handler like this
myChart.getZr().on('click', function (params) {
Object.keys(params.target).filter(key => key.includes(
'__ec_inner_')).filter(key => params.target[key]
.seriesIndex != undefined).forEach(key => {
console.log(option.series[params.target[key]
.seriesIndex].name)
})
});
I have a list of interventions on my "first page". When I click on one, I navigate to its details, "second page", and there, is a button that allows me to start the events. When I click on that button it fills an object from a route : api/current
{
"interventionSummary": {some object}
}
When there's no intervention started :
{
"interventionSummary": null
}
When an intervention is started, it should be ended too so if the users doesn't I want to show a reminder message in the interventions list ("page 1") using: if interventionSummary !== null -> display the message to remind to end the intervention.
The problem is that my object interventionSummary is not updated when I go back on my interventionsList, unless I reload. For another page I was able to use :
this.props.navigation.addListener('focus', doStuff);
But the button and the route used were in the same page. I have tried, forceUpdate, simulate a state change : this.setState({state : this.state}) from solution on google, but nothing is working, I don't know how to make the component interventionsList see the update, or just re render after the click on the "second page"...
I hope that's clear, if anyone knows a way to do that
in your first page create your function.
myMethod() {
//function i want to call in second page
}
in your first page when navigating to second page(in my case when user presses a button) pass a function as a parameter like below:
onPress={() => this.props.navigation.navigate('SecondPage', {
rerenderOutputTitles: () => this.myMethod(),
})}
then in second page call this method wherever you want like below:
this.props.navigation.state.params.rerenderOutputTitles();