I'm writting e2e tests for a Angular/Polymer app (thus using web-components). Is it possible to have access to DOM properties as in :
$0.selectedItem?
I tried using :
elem = browser.executeScript('return document.querySelector("my-scrollList")');
and then calling
elem .then(function (el){
console.log(el.selectedItem);
});
But it doesn't work.
However, if I call the property directly from the executeScript command like so it works but it is very tedious :
elem = browser.executeScript('return document.querySelector("my-scrollList").selectedItem');
Is there a way to access DOM properties through WebElements or Protractor API ?
Thanks in advance.
With a CSS selector by selecting the selected attribute among the <option>:
$("my-scrollList").$("option[selected]")
or :
$("my-scrollList option[selected]")
Probably you want to calls to $ by chained to find element within a parent. Take a look at Protractor API .
Your code, probably, should look like this one:
elem.then(function (el){
console.log(el.$('selectedItem'));
});
Related
I'm trying to write a function to find child(ren) element(s) within a locator something like:
async findElements(locator: Locator){
return locator.querySelector(some/xpath/or/css);
}
However, I'm seeing the querySelector is not available in Locator. What is the equivalent of querySelector?
I figured it out,
locator.locator(some/xpath/)
I have just started working with playwright. So this may not be the exact answer that are looking for.
I am studying playwright with an existing repository.
[https://github.com/twerske/ng-tube/blob/main/src/app/video-grid/video-grid.component.html]
In this scenario I just want to know that I am getting a list of cards back.
<div class="videos-grid">
<mat-card *ngFor="let video of videos" class="video-card">
I don't need a reference to a parent for this situation. I am able to simply reference the child by class videos-grid. This all exists inside of a angular's For loop. I know Svelte and other frameworks iterate through lists in different ways.
test.only('ngTube has header and cardList', async ({browser}) => {
const page = await browser.newPage();
const context = await browser.newContext();
await page.goto("http://localhost:4200/")
const title = await page.locator('.header-title').textContent();
const videoList = (await page.locator('.video-card').allTextContents()).length;
// await page.pause();
expect(title).toStrictEqual('ngTube');
expect(videoList).toBeGreaterThan(0)
})
Because I want all text contents I can get everything with the classname '.video-card'.
I guess what I am getting at is as long as you can access an identifier you should be able to directly access it. As I run through the documentation more and scenarios I will update/add to this answer.
I'm new to cypress and am trying a couple of different methods to get a checkbox property...
checkBox().should('have.prop', 'checked')
checkBox().its('checked').should('exist')
The first line works fine but I was expecting the second to also pass but I get a "expected Undefined to exist" response.
Thanks
Assuming checkBox() function returns cy.get('.checkbox'), I think
checkBox().its('checked').should('exist')
fails because checkBox() does not return an object containing just the attributes. It returns the whole element (I think as an array). so you can't use its('checked') directly on checkbox().
Anyways, to do what you are expecting to do, you can use several methods,
using invoke('attr', 'checked')
checkBox().invoke('attr', 'checked')
.should('exist')
using getAttribute js function and expect chai assertion
checkBox().then($el => {
expect($el[0].getAttribute('checked')).to.exist;
})
using attributes in js and (its, wrap) in cypress.
Note: As mentioned earlier, you can't directly use its on the cy.get(). You need to extract the attributes from the object and use cy.wrap()
checkBox().then($el => {
cy.wrap($el[0].attributes)
.its('checked')
.should('exist')
})
you can use any of those methods, but the one I recommend is your first method.
cheers. Hope it helps.
I want to get the Attribute value and store in a variable how we can achieve this in cypress
In my case I want to get the complete class value and store it in variable.
This code just give me the attribute class value but how I can store the fetch value in variable
cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
I was trying to compare the style of one element with another to make sure they were equal. Here's the code that seems to work for me.
cy.get('.searchable-group-selector-card-image')
.eq(4)
.invoke('attr', 'style')
.then(($style1) => {
const style1 = $style1
})
A good way to solve this kind of scenario is to use the alias mechanism. One could leverage this functionality to enqueue multiple elements and then check all of them together by chaining the results. I've recently come to a case in an SPA where the assertion had to happen between elements that were spread across different angular routes (call them different pages).
In your use case, this would like:
cy.get('.searchable-group-selector-card-image')
.eq(4)
.invoke('attr', 'style')
.as('style_1')
cy.get('.another-element')
.invoke('attr', 'style')
.as('style_2')
// later on for example you could do
cy.get('#style_1').then(style_1 => {
cy.get('#style_2').then(style_2 => {
// Both values are available and any kind of assertion can be performed
expect(style_1).to.include(style_2)
});
});
This is described in Variables and Aliases section of the Cypress Documentation.
Here is how I got the value of for attribute in a label tag which had text "Eat" inside.
cy.contains('Eat').then(($label) => {
const id = $label.attr('for');
}
Most important thing is to get the selector right, so it exactly finds the value you are looking for. In this case you already found it. By using then() gives you the ability to store it in a variable.
cy.get('div[class*="ui-growl-item-container ui-state-highlight ui-corner-all ui-shadow ui-growl-message"]').invoke('attr', 'class')
.then($growl-message => {
const message = $growl-message.text()
//do the checks with the variable message. For example:
cy.contains(message)
})
Note that the scope of the variable is within the curly brackets. Thus using the variable has to be within those curly brackets.
I am using webdriver.io with chai and mocha for testing.
In one of my tests I need to count how many elements with the same CSS class are in the page. None of the webdriver.io API seems to return an array.
How can it be achieved?
This is how you do it:
client.elements('.myElements', function(err,res) {
console.log('element count: ',res.value.length);
});
Explanation: with elements you fetch all elements according given selector. It returns an array of webdriver elements which represents the amount of existing elements on the page.
For version 4 of webdriver.io, this is the way
client.elements('.selector').then(function (elems) {
console.log(elems.value.length);
});
For version 7.13.2 of webdriver.io, you can try this
const count = await $$('selector').length
Or you can write to a variable and later use it
let smth = browser.elements('selector').value.length;
I have an ExtJS grid that has a button set up in it. The button triggers a function that's defined into other JS file that's included in the grid page. The function triggers ok but in that function I want to get the columns count like this:
grid.getColumnModel().getColumnCount()
The problem is that I get an error like: grid.getColumnModel is not a function.
In PHP I would make a "global $ext" and then access that function. How can I do this in Ext ? How can I access the grid from other file ? What needs to be defined ?
Thank you.
How did you define the grid object? Did you do it like this:
var grid = new Ext.grid.GridPanel(...);
If so, the grid object is not in global scope. Remove the "var" and see if it helps.
This looks like a scope issue. See variable scope in JavaScript.
Basically, you can do:
my_global_grid = ... // accessible in the current ~global~ context (document, window)
var my_local_grid = ... // accessible only in the function
window.my_window_global_grid = ... // accessible in the same window
You might also pass the grid object into your function as an argument:
function myFunction(arg1,arg2,grid){
...
var count = grid.getColumnModel().getColumnCount();
...
}