Is it possible to add a new attribute to main div.
for example in html output(by default):
<div id="my-id" class="ms-ctn form-control ms-ctn-focus" style="">
....
</div>
instead (add new-attr="value"):
<div new-attr="value" id="my-id" class="ms-ctn form-control ms-ctn-focus" style="">
....
</div>
Edit directly the magicsuggest source code for adding that attr, or use jQuery to add that new attribute easily with:
$('my-id').attr('new-attr', 'value');
http://api.jquery.com/attr/
Related
I have a app the creates forms dynamically. In the e2e tests, the e2e creates the form and after the test form will be deleted from the db.
This means I can not use class, ids, or data attribute values because their values are dynamically generated. ie: <div id="input_1642" class="input_1642">. Being the form is created by e2e and destroyed after the test is done, there is no way for me to know their values and they will not persist.
For the following html, in which the only unique value I really have is the required input in <span style="white-space: pre-wrap; overflow-wrap: break-word;">required input</span>
Using Playwright, and not being able to use class, id, or data attribute values, what is the cleanest way to grab (selector) the input so I can page.fill()?
I was hoping to avoid having using Xpath
<div id="input_1642" class="input_1642">
<div>
<div>
<div class="ant-row ant-form-item" style="row-gap: 0px;">
<div class="ant-col ant-form-item-label ant-form-item-label-left">
<label for="input_1642" class="ant-form-item-required" title="">
<span>
<span style="white-space: pre-wrap; overflow-wrap: break-word;">required input</span>
</span>
</label>
</div>
<div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<span>
<span>
<input formbuilderhiddenfrom="" data-cy="form_item_input_1642_3" data-navigate="false" id="input_1642" class="ant-input align-input-items" type="text" value="">
<span></span>
How about you use a partial selector like this:
page.fill('[data-cy*="form_item_input_"]', 'some text')
To pinpoint the correct element, you can further use the Nth Selector
page.fill('[data-cy*="form_item_input_"] >> nth=0', 'some text')
According to the docs, you can find the element by the text of its label.
You have a label for that input. So you could try something like:
await page.locator('text=required input').fill('some text');
I am stuck by finding a specific button within my list of items... The button exists 3 times with exact same data-testid, but the parent is different. And I end with
error: cy.click() can only be called on a single element. Your subject contained 3 elements. Pass { multiple: true } if you want to serially click each element.
HTML:
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
<div data-testid="list-item">
<div>
<div>
<span data-testid="status2">
<button data-testid="details_button">click</button>
</div>
</div>
</div>
How can I select the details_button of either status1 or status2?
My attempt was:
cy.get('[data-testid=status1]')
.get('[data-testid="details_button"]').click()
cy.get('[data-testid=status1]')
.parent().parent()
.get('[data-testid="details_button"]').click()
Your first attempt is almost correct, but use .find() for the second step
cy.get('[data-testid=status1]')
.find('[data-testid="details_button"]') // find works here (same as .within())
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1">
<button data-testid="details_button">click</button>
<!-- span closing tag is missing -->
</div>
</div>
</div>
The reason that works is because the HTML posted is slightly invalid - the <span> has no closing tag.
Cypress thinks that the button is inside the span, so using .find() works.
However if that's a typo, you should change to your 2nd command using .parent() and also change .get() to .find()
cy.get('[data-testid=status1]')
.parent()
.find('[data-testid="details_button"]')
.click()
Works for this HTML
<div data-testid="list-item">
<div>
<div>
<span data-testid="status1"></span>
<!-- span is closed, button is outside span so use .parent() command -->
<button data-testid="details_button">click</button>
</div>
</div>
</div>
You can use the siblings() method is cypress.
cy.get('[data-testid=status1]').siblings('[data-testid="details_button]').click()
cy.get('[data-testid=status2]').siblings('[data-testid="details_button]').click()
You can also use a combination of parent() and within(), something like:
cy.get('span[data-testid=status1]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
cy.get('span[data-testid=status2]')
.parent('div')
.within(() => {
cy.get('button[data-testid="details_button]').click()
})
Hi Fairly new to watir and came across this problem. How can I select the button in the following snippet of code
<div id="side bar" class="sidebar">
<div class="inner active" data-reactid=".1">
<a class="back side bar" data-reactid=".1.0" href="#overview">
<h2 data-reactid=".1.1">
<div class="price clearfix" data-reactid=".1.2">
<div class="values type-current-value" data-reactid=".1.3">
<div class="values date-current-value" data-reactid=".1.4">
<div class="values duration-current-value" data-reactid=".1.5">
<div class="values passengers-current-value" data-reactid=".1.6">
<div class="values yacht-current-value" data-reactid=".1.7">
<div class="values flight-current-value" data-reactid=".1.8">
<div class="share-quote" data-reactid=".1.9">
<a class="share-quote cta-button cta-button-blue = share-quote-processed" data-reactid=".1.9.0" data-modal-url="/share-quote" href="#">Share this quote</a>
</div>
I am trying the following which produces a no method error
b.links(:xpath => '//div[#class="share-quote"]/a').to_a.click
The code is trying to click an array of links, rather than an individual link. That is why you get an undefined method error.
You need to click a specific link within the collection. For example:
# Click the first link
b.links(:xpath => '//div[#class="share-quote"]/a').first.click
# Click the last link
b.links(:xpath => '//div[#class="share-quote"]/a').first.click
# Click the nth link
b.links(:xpath => '//div[#class="share-quote"]/a')[n].click
Assuming there is only one of these links on the page, it would be more Watir-like to do:
b.div(class: 'share-quote').link.click
I've recently updated polymer and components, and a weird thing appears.
I have paper-dialog element, and inside, on the left a paper-menu item with multiple paper-item. On the right, a simple div with some content.
When clicking on a paper-item, the content of the div will change.
Since the update, when clicking on a paper-item element, the dialog will automatically close.
After searching, it appears that if I remove the paper-menu element and only left the multiple paper-item, the problem will no longer occurs.
After looking inside the iron-menu-behavior, I found a new function (an override of _activateHandler), which, when commented, will kept previous functionning without closing the dialog.
I keep searching to find any solution, but anyone encountered the same problem?
For information :
<paper-dialog id="dialog" with-backdrop>
<div id="content"></div>
</paper-dialog>
And inside my div is added this :
<div class="content">
<div class="list">
<paper-menu>
<template is="dom-repeat" items="{{menu}}">
<paper-item on-click="_onCategorySelection">
<iron-icon icon="{{item.icon}}" class="icon"></iron-icon>
<span class="text">{{item.text}}</span>
</paper-item>
</template>
</paper-menu>
</div>
<div id="listContent">
<div class="noContent" hidden$="{{content}}">
<div class="noContentText">Pas de catégorie séléctionnée</div>
</div>
<template is="dom-if" if="{{content}}">
<div class="withContent">
<template is="dom-repeat" items="{{content}}" as="widget">
<badge data="{{widget}}" on-click="_onWidgetSelect"></badge>
</template>
</div>
</template>
</div>
</div>
Thanks a lot
Okay, looking at the problem, is seems to be a known issue: https://github.com/PolymerElements/iron-menu-behavior/issues/40
I'll point your JSBIN too there!
EDIT: it is yours! :)
I have a template like
script type: "text/template", id: "list-template", '''
<div class="display">
<div id="list-name"><%= name %></div>
<span class="list-destroy"></span>
</div>
<div>
<ul id="ul-cards">
</ul>
</div>
<div class="edit">
<input class="list-input" type="text" value="<%= name %>" />
<input id="btnEdit" type="button" value="Save" class="primary wide js-add-list" />
<input id="hdnListId" type="hidden" value="<%= listId%>" />
</div>
<form class="add-list-card js-add-list-card clearfix">
<textarea placeholder="Add card" class="new-card"></textarea>
<input type="button" value="Add" class="primary js-add-card">
<a class="app-icon close-icon dark-hover cancel js-cancel-add-card" href="#" id="closeCard"></a>
</form>
'''
in this template i have <ul id="ul-cards"> element in which i want to render another template which display list inside this ul.
this template is :
script type: "text/template", id: "card-template", '''
<div>
<span class="card-name"><%= name %></span>
</div>
'''
is it possible or i have to do it in another way?
please help me if anyone have idea.
thanks in advace.
it is worked but still i have one problem in data display in
<ul id="ul-cards"> there sholud be 2 as per records in my database but it will display only 1 . data fetch properly but display only last data.
There are two ways to do this: the DOM way and the template way.
The DOM way involves adding your views using DOM methods: you have your ListView and your CardView; the ListView invokes individual CardViews that fill in the ListView's element.
The template way requires that you remember this: backbone's views are policy frameworks, not policy templates. Render doesn't have to render into the DOM. You can use render() to return a string, for example. If your event manager is on the ListView object only (possible; I've done this), then you can have ListView invoke "the resulting array of an array of CardView renders" and insert that directly into ListView's template. This is actually faster, as you only require the browser to analyze the entire ListView HTML blob once, when it's inserted into the innerHTML of the parent DOM object.