I am writing tests for React code where I get the error
Unable to find an element by: [data-testid="primary-cta"]
I actually want this to be for negative test case where the button is not displayed in the page
const renewButton = getByTestId('primary-cta');
expect(renewButton).not.toBeInTheDocument();
So I am using "not.toBeInTheDocument();" , but I am getting the error
Can anyone pleaase help ?
Thanks in advance
You can use queryByTestId if the element may not be present. queryBy* methods return null if the element is not found.
getBy* methods throw errors in case there are no matching elements. Hence, the error you are getting.
Relevant docs: Link
Related
I try to create a code that should help me automates the process of biding. I use Nightmare.js and when I am trying click button it returns error. Which says: Error: Unable to find element by selector: .MenuItemButton__1ijozEjL3V.here is my code
This method finds element by selector with document.querySelector. And button with this selector is on the pagecontent of the page but this element is not found by Nightmare.js. What might be wrong with my code? I have never tried webs-crapping before. Any advices will be appreciated
I am building an APP using React + chakra-ui and I am in the process of adding Cypress tests to it, but I am facing a blocker and I was wondering if anyone had faced a similar problem and that could help!
Problem:
The test I am trying to pass is to verify that my element contains a CSS property, however, the CSS was generated by Charkaui with their unique syntax (e.g --chakra-scale-x)
My test case is as follow
cy.get('MY_ELEMENT')
.should('be.visible')
.should('have.css', '--chakra-scale-y', 1);
This test gave me the error
expected '<div.css-o64oke>' to have CSS property '--chakra-scale-x'
even though I can see from inspect element that it does have the following property.
Does anyone know a solution or a workaround for this? Thanks in advance!
Edit:
--chakra-scale-y is a css variable, which will be applied (probably as a transform) by the browser css engine.
Take a look in the devtools Computed tab (unselect Show all to see just those applied). If a transform shows up, this is what you need to test for.
In the test use getComputedStyle to check the value identified above.
cy.get('MY_ELEMENT')
.then($el => {
const win = cy.state('window')
const styles = win.getComputedStyle($el[0])
const transform = styles.getPropertyValue('transform')
console.log(transform)
expect(transform).to.eq(...)
})
It looks like you need to check scaleY, this is from the chakra library
const transformTemplate = [
"rotate(var(--chakra-rotate, 0))",
"scaleX(var(--chakra-scale-x, 1))",
"scaleY(var(--chakra-scale-y, 1))",
"skewX(var(--chakra-skew-x, 0))",
"skewY(var(--chakra-skew-y, 0))",
]
I am using polymer 1.0.8 with angularjs through this library.and i am getting error
Uncaught TypeError: prototype.registerCallback is not a function
tried solutions mentioned in this and this link
Note: m not using any paper elements.
Note: no core or iron elements are used.m working on much simple example as a beginner.
but still m getting this error and no custom polymer element is working.please help me here.......
i don't know the reason behind it but i fixed this just by removing element's name from definition.
Polymer("x-double",{
properties:{});
to this
Polymer({
properties:{});
may be version's problem or something else...........
I have this tag in my app
<body id="ctl00_ctl00_Body" menuopen="true">
I'm trying expect if the menu is true or false. Right now I've tried
var body = element(by.id('ctl00_ctl00_Body'));
expect(body.getCssValue('menuopen').toEqual('true'))
and getting the error
TypeError: Object [object Object] has no method 'toEqual'
Thanks for any help! I am still very new at this. Google'd for the last few days and couldn't find anything
A bracket is misplaced in your code.
expect(body.getCssValue('menuopen')).toEqual('true')
From jasmine documentation:
Expectations are built with the function expect which takes a value, called the actual. It is chained with a Matcher function, which takes the expected value.
In your case the matcher is toEqual
Answering the comment:
Getting this error now UnknownError: unknown error: failed to parse
value of GET_EFFECTIVE_STYLE
menuopen is not a css value but an element attribute. So you have to use getAttribute instead of getCssValue
expect(body.getAttribute('menuopen')).toEqual('true')
Seems to be a problem adding a component to a viewport in extjs due to some known issue
The ideal would be:
var paneltab = Ext.create('ROMLProjectAdmin.view.MainTabPanel');
Ext.getCmp('loginregister').destroy();
Ext.Viewport.add(paneltab);
An error occurs:
Uncaught TypeError: Object function constructor(){
// Opera has some problems returning from a constructor when Dragonfly isn't running. The || null seems to
// be sufficient to stop in misbehaving. Known to be required against 10.53, 11.51 and 11.61.
return this.constructor.apply(this, arguments) || null;
} has no method 'add'
Found this on the web which explains what's going on but I don't fully understand how to implement the proposed solution using 'refs' as I'm a newbie. I wondered if someone could give me a simpler explanation.
Or, based on the failing code above, can someone please give me an alternative way to launch a tab panel (in this case user logged in and so that screen is done with and now to open the main tabs).
Thanks in advance.
Kevin
Ext.Viewport is just the class, you need an instance of that class in order to add components to it:
Ext.create('Ext.container.Viewport', {
id: 'myviewport'
});
var paneltab = Ext.create('ROMLProjectAdmin.view.MainTabPanel');
Ext.getCmp('loginregister').destroy();
Ext.getCmp('myviewport').add(paneltab);