Let's consider the case where I need to assert if an element exists. There are 2 possible ways of doing this in cypress:
1) cy.get('button').contains('Save')
2) cy.get('button').contains('Save').should('exist')
In both cases the test will fail if the 'Save' button not exist.
What are the reasons apart from maybe better code readability/maintainability that I should add the .should('exist') to my cypress tests?
For your usecase of asserting whether an element exists, they are indeed redundant.
.contains() yields a DOM element and according to documentation, .should yields the same element it was given as an input. There are some exceptions when .should yields different element (as you can see in the documentation) but in case of using should('exist'), they are really redundant
As you mentioned, I personally also prefer adding should for better readability. Actually I prefer .should('be.visible') because of following scenario - when an element is hidden or is pushed out of the screen because of some CSS issues, it doesn't exist from user perspective. But..
cy.get('button').contains('Save') - passes test
cy.get('button').contains('Save').should('exist') - passes test
cy.get('button').contains('Save').should('be.visible') - fails test
Actually, until v4.0 is released (and this PR is merged), you need to chain should('exist') assertion if you chain any negative assertions yourself. This is because the default should('exist') assertion is skipped when you chain your own assertions.
Not necessary for positive assertions because they won't pass on non-existent elements.
Also see Implicit should 'exist' assertion is not being applied on cy.get() when other assertion.
Below, the element .first-item does not exist but the assertion passes:
describe('test', () => {
it('test', () => {
cy.get('.first-item').should('not.have.class', 'is-selected');
});
});
From my test,
cy.get('button').contains('Save').should('exist')
is not redundant.
It's true that, if it contains Save, your test is successful. If it doesn't, your test fails with the desired reason description. In that aspect, should('exist') is redundant.
However, if you do cy.get('button').contains('Save'), and the button exists, you only get a grey step which means the step is executed without error. But it does not show a green assert badge, because you don't have an assertion there.
So I could suggest removing line 1) and keep line 2).
Then if it passes, you get a green assert badge. If it fails, it actually fails at contains('Save') part rather than should part. But anyway, you get red error with meaningful error messages.
Although, I do agree with #Durkomatko that 'be.visible' is better if you do want it to show on the page.
Related
Right or wrong: In Cypress, its impossible to read a value on page X, then keep this value and compare it to a value on page Y.
I can read a value from the page and log it:
cy.get('[data-e2e-selector=whatever]').then(elm => cy.log('Value from page X : ' + elm))
or, for instance, the number of elements with similar or partially matchin selectors:
cy.get('[data-e2e-selector=^whatever]').then(elm => cy.log('Number of elements like this on page X: ' + elm.length))
Hoever, I cannot create a variable of this, because of the asynchronous way Cypress runs. Right? Any value created to just be blank.
Nor can I pass the value read to a method, which in turn compares it to the value on the next page:
compareToValueOnNextPage(cy.get('[data-e2e-selector=^whatever]').then(elm => elm.length));
compareToValueOnNextPage(value: number) { // NB: Not sure if it's a number or string yet...
cy.get('[data-e2e-selector=^whateverNextPage]').then(elm => elm.length).should('have.length', 4)
}
Basically, if I want to compare values, the either have to be on the same page, or they need to be hard-coded. This is a huge limitation when actually end-to-end testing some applications. Very often, a value is created on page X, based on input which should in many cases ba random, thus creating a dynamic value in the test. Then, on page Y, that same value is fetch (from the backend) or shown in some other way, in a Summary etc. And, naturally, I want to compare the value shown on page X to the one shown on page Y/Summary. But this is not possible, due to the very unit-testing thinking that seems to be the foundation for Cypress.
Or am I missing something here? Are there ways around this that aren't ugly/smelly? I think it's possible to store the value on page X in a file, then read that file on page Y. However, Cypress seems to only have one option when reading the file, and that's reading the whole file and looking for a match. So that file would be a mess. Or I'd need several files.
I realize this is kind of trying to impose non-functional ways on a quite functional and asynchroeous technology. However, if it's not possible to "keep" a value and use it later, it's very limiting when it comes to end-to-end testing (even though it's not when the testing is unit-based on frontend components).
UPDATE:
As per Kerrry's suggestion in the answer below:
cy.get('[data-e2e-selector=dellan-accordion]')
.then(elm => cy.wrap(elm.length).as("myVariableName"));
-GO TO NEXT PAGE-
cy.get('[data-e2e-selector=betalingsplan-dellan]')
.then(elm => elm.length)
.should('have.length', myVariableName)
This yeilds "expected 4 to have property 'length'.
This means, obviously, that I cannot get the length of the length.
So I replace 'have.length' with 'eq':
cy.get('[data-e2e-selector=betalingsplan-dellan]')
.then(elm => elm.length)
.should('have.length', myVariableName)
And I get the following error:
expected 4 to equal 0
So, it seems that the first variable - myVariable - is gone after the first cy.get().
If I do everything inside one get (have another get inside that, where I go to the next page AND get the count of the elements), then it works. But the way Kerry shows it, it would be much more flexible. But, alas, the above error.
As jonrsharpe mentioned in the comments, please read the Cypress document on variables and aliases thoroughly. This is a core concept of Cypress, and it will give you a solid understanding of how to implement variables and carry the values between test steps.
The reader's digest example of what you how you can achieve is this:
cy.get('[data-e2e-selector=^whatever]')
.then(elm => cy.wrap(elm.length).as("myVariableName"));
What this is doing is cy.wrap will yield the value from elm.length in a Cypress command chain, which then allows you to assign it to an alias "myVariableName".
In your following test step where you want to compare the value on a separate page, you would then access the alias' value in one of two ways:
Using this.
cy.get('[data-e2e-selector=^whateverNextPage]')
.then(elm => elm.length)
.should('have.length', this.myVariableName)
OR
via cy.get()
cy.get("#myVariableName").then(function(variableValue){
cy.get('[data-e2e-selector=^whateverNextPage]')
.then(elm => elm.length)
.should('have.length', variableValue)
})
I'm creating several commands programmatically and want to avoid having to add key mappings for them explicitly in keymap.cson.
The Flight Manual page for Keymap Manager shows an add method. It doesn't give an example of how to actually use this method, so my guess is that this should work:
atom.keymaps.add('atom-text-editor',{'alt-1':'custom:my-command'});
However, this does not appear to work. When I run this in the developer console, I get this message:
Encountered an invalid key binding when adding key bindings from 'atom-text-editor' 'custom:my-command'.
I got this message even if I changed alt to ctrl.
What does the correct method call on atom.keymaps look like.
I agree, the docs are not detailed enough. However, through trial and error, I managed to figure it out:
atom.keymaps.add('foo', {
'atom-text-editor' : {
'alt-1': 'custom:my-command',
'#': 'application:about'
// etc
}
});
Explanation:
atom.keymaps.add(source, bindings, priority);
The source argument is not the same as what is referred to as the selector in Atom speak. Instead, it's an identifier that can be used to remove the keybindings, should you wish to (except it seems they haven't actually implemented a remove method!).
Instead, the selector should go inside the bindings argument, as shown above.
I am having problems in Capybara with the Ambiguous match problem. And the page provides no 'ids" to identify which one is which.
I am using within function.
within('.tile.tile-animation.animation-left.animation-visible.animated') do
#some code in here
end
I've used the :match option which solved my first problem.
within('.tile.tile-animation.animation-left.animation-visible.animated', :match => :first) do
#some code in here
end
The question is how to get to the SECOND css '.tile.tile-animation.animation-left.animation-visible.animated' ?
It depends on the html -- a simple solutions is
within(all('.tile.tile-animated.animation-left.animation-visible.animated')[1]) do
# some code in here
end
which will scope to the second matching element on the page, but won't be able to auto-reload if the page changes, and won't wait for the elements to appear. If you need it to wait for at least two elements to appear you can do
within(all('.tile.tile-animated.animation-left.animation-visible.animated', minimum: 2)[1]) do
....
which will wait some time for at least the 2 elements to appear on the page, but still won't be able to auto-reload if the page changes. If you need the ability to auto-reload on a dynamically changing page it will need to be possible to write a unique selector for the element (rather than indexing into the results of #all.
Given the following Meteor code helper from the websites "Try Meteor" tutorial:
// Add to Template.body.helpers
incompleteCount: function () {
return Tasks.find({checked: {$ne: true}}).count();
}
I get pretty much everything about this code except for this arbitrary looking $ne thing. I've seen this before with Meteor examples and I don't get it: What does $ne represent? Where did $ne come from?
$ne means not equal to.
It is preferable to use this instead of {checked: false} since it also includes the ones where the checked attribute isn't in the document {} and the case where {checked: null} as both of these are cases where checked isn't equal to true & are also not false.
This way if you have a fresh document without any attributes it would also be a result of the query.
I'm trying to test for the presence of a string somewhere in a long webpage. Using PHPUnit's assertRegExp if the string is not found it prints out the entire page and then finishes with matches PCRE pattern "/xxxxxx/". According to the documentation I should be able to specify a message a third that will be printed out if the test fails. That message is printed, followed by the full page source. What I'd like to do is just print the message. Using Selenium in my previous apps I used assertTextPresent and it would just print out confirmation that the text was/was not found, without filling my screen.
I have tried wrapping the assertRegExp in a try-catch but it didn't change anything.
You could try assertContains() instead of assertRegexp().
PHPUnit is responsible for printing out the failed text, and this differs from one assert method to another. It just might work.
If it does not, open an issue at PHPUnit's issue tracker about PHPUnit printing too much out.
I am using the getBodyText() method to get all page content and than I use assertTextPresent() to check the presence of pattern.
$this->assertTextPresent($this->getBodyText(), 'text to find');
The solution has been positivly tested with latest phpunit 4.7.
I use assertTrue(stripos($haystack, $needle) !== false, 'Failed assertion message');