Protactor - Finding CSS Value (specifically in a body tag) - angularjs

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')

Related

React JS - Unable to find an element by data-testid

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

Backbone.js - get childElementCount value in devTools to print

I trying to log childElementCount property in chrome dev tools but I get undefined.
this is my code:
console.log('childElementCount---', this.ui.tbody.get('childElementCount')
returns childElementCount--- undefined
why is it undefined?
jQuery get() is for retrieving the underlying DOM element from the jQuery object. It accepts an integer index instead of a string.
Try this.ui.tbody.get(0).childElementCount or this.ui.tbody.get(0).getAttribute('childElementCount')
or withjQuery:
this.ui.tbody.prop('childElementCount')
or this.ui.tbody.children().length

Can't find id of Angular ui-grid element with Selenium/Protractor

I have some Protractor tests that are running on an Angular application that uses ui-grid. I have some working smoke tests for the application, but I am just starting to implement tests using https://github.com/angular-ui/ui-grid/blob/master/test/e2e/gridTestUtils.spec.js to test the ui-grid components. The problem I'm having is that I need the actual id of the grid element in order to use the getGrid function.
I'm able to successfully locate the element using element(by.css("[id$='-grid-container']")), but for some reasons my attempts to get the full id out of the element have failed. Here is what I am trying:
var grid = element(by.css("[id$='-grid-container']"));
grid.getAttribute('id').then(function(result) {
console.log(result);
var myGrid = gridTestUtils.getGrid(result.toString());
gridTestUtils.expectCellValueMatch(myGrid, 0, 0, 'Cox');
});
The console.log(result); is not logging anything. It doesn't SEEM necessarily related to ui-grid, it's just Selenium isn't finding the id for some reason. As far as I can tell I'm using getAttribute correctly; it works with this syntax in other tests, but maybe I'm missing something. Any ideas why this isn't working?
Edit because my comment is unreadable:
Thanks for the suggestions. However, I'm still just as confused because
var grid = element(by.css("[id$='-grid-container']"));
console.log(grid.toString());
grid.getAttribute('id').then(function(result) {
console.log('======'+result);
var myGrid = gridTestUtils.getGrid(result.toString());
gridTestUtils.expectCellValueMatch(myGrid, 0, 0, 'Cox');
});
gives a console output of
[object Object]
======
so it seems like the element is being found, which I had already checked, and the console.log inside the promise is being executed.
It's like it can't find the 'id', which according to the API documentation means there is no id on the element. But that is definitely not true.
Not sure on the semantics, but you could try this, just to make sure that you are getting the first element, if multiple:
element.all(by.css('[id$="-grid-container"]')).first().getAttribute('id').then(function(result) {
console.log(result);
var myGrid = gridTestUtils.getGrid(result.toString());
gridTestUtils.expectCellValueMatch(myGrid, 0, 0, 'Cox');
});
Your code looks correct.
However, if your console.log(result) doesn't log anything, this means you either didn't find the element or the moment you execute the getAttribute() the element is no longer present.
See in the API description, that getAttribute() always returns a value, if the element is present.
Maybe try to extend console.log('======='+result); to figure out, if that line of code gets executed (I'm pretty sure it's not executed). Also try console.log(grid.toString());, which should output [object Object], if the element is really found.
As for the ElementFinder, I'm used to use the ' and " just the other way around, so element(by.css('[id$="-grid-container"]')); or shorter $('[id$="-grid-container"]').
Let me know, if this helped and you could further determine the cause.
Round 2
Let's exclude a few things
change getAttribute('id') to getAttribute('outerHTML') to see,
if there is anything logged.
change (result) to (resultattr) to exclude, that result is else used by a plugin, who put result as a global variable.
change grid.getAttribute() to be element(by.css("[id$='-grid-container']")).getAttribute
What are the results of those actions?

how to find element in protractor test?

Trying to check the value of this element on an angular plunker:
it('should display valid',function(){
browser.get('http://embed.plnkr.co/3nt01z/preview');
var errortext =element(By.xpath('body>div>h2>span:nth-child2)')).getText);
expect(errortext).toBe('Not:(');
})
Getting an error though:
Stacktrace:
InvalidSelectorError: invalid selector: Unable to locate an element with the xpath expression body>div>h2>span:nth-child(2) because of the following error:
SyntaxError: Failed to execute 'evaluate' on 'Document': The string 'body>div>h2>span:nth-child(2)' is not a valid XPath expression.
Is there a better way to find this span element or what is the right xpath expression?
I think you meant By.cssSelector(...).
By.xpath expects an XPath expression, which would be something like /body/div/h2/span[2], although I'm not sure about the exact syntax.
By the way, your code would be easier to test if you added an ID or CSS class to the element, so you don't need to depend on the exact DOM structure.
Try to use element(by.css('some css selector'))
Also, you have a typo in code - getText; instead of getText();
Or try this:
var errortext = element(By.xpath('/body/div/h2/span[2]')).getText();

Validating text value in protractor

I am new to protractor and I am try to validate the value in the text field. Below is my code
expect(element(by.model('myModelName')).getAttribute('value').toEqual('name'));
I am getting the below error
Message:
TypeError: Object [object Object] has no method 'toEqual'
Stacktrace:
TypeError: Object [object Object] has no method 'toEqual'
at null.<anonymous> (C:\IntegrationTesting\script\Spec.js:53:100)
I have done other validations based on by.bind with toEqual which, but this is the 1st time i am using this. I am not sure if my usage is correct. How can I get this working? Please help me...
Put the toEqual() after the expect:
expect(element(by.model('myModelName')).getAttribute('value')).toEqual('name');
The format should be:
expect(locator.getSomething()).toEqual('expected value');
wrong brackets:
expect(element(by.model('myModelName')).getAttribute('value')).toEqual('name');

Resources