I have a big problem !!! After a few days of normal use suddenly I can no longer select the button key number of web whatsapp!
The environment is Chrome and I use Selenium web driver ... I'm trying to do all the searches for different tags but nothing ...
This is the code
bot.wait 4000
bot.findElementByClassName("C28xL").Click
I also tried using different parts but nothing ... even with xpath or css but maybe I'm wrong.
button search whatsapp web
Button to select.
<div class="gQzdc"><button class="C28xL"><div class="_1M3wR _1BC4w"><span class="" data-icon="back-blue"><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#4FC3F7" d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z"></path></svg></span></div><div class="_1M3wR _3M2St"><span class="" data-icon="search"><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="#263238" fill-opacity=".3" d="M15.009 13.805h-.636l-.22-.219a5.184 5.184 0 0 0 1.256-3.386 5.207 5.207 0 1 0-5.207 5.208 5.183 5.183 0 0 0 3.385-1.255l.221.22v.635l4.004 3.999 1.194-1.195-3.997-4.007zm-4.808 0a3.605 3.605 0 1 1 0-7.21 3.605 3.605 0 0 1 0 7.21z"></path></svg></span></div></button><span></span><div class="_2cLHw">Cerca o inizia una nuova chat</div><label class="_2MSJr"><input value="" title="Cerca o inizia una nuova chat" dir="auto" data-tab="2" class="jN-F5 copyable-text selectable-text" type="text"></label></div>
Screenshot of more html for page:
<div class="gQzdc">
<button class="C28xL">
<div class="_1M3wR _1BC4w">
<span class="" data-icon="back-blue">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="#4FC3F7" d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z"></path>
</svg>
</span>
</div>
<div class="_1M3wR _3M2St">
<span class="" data-icon="search">
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="#263238" fill-opacity=".3" d="M15.009 13.805h-.636l-.22-.219a5.184 5.184 0 0 0 1.256-3.386 5.207 5.207 0 1 0-5.207 5.208 5.183 5.183 0 0 0 3.385-1.255l.221.22v.635l4.004 3.999 1.194-1.195-3.997-4.007zm-4.808 0a3.605 3.605 0 1 1 0-7.21 3.605 3.605 0 0 1 0 7.21z">
</path>
</svg>
</span>
</div>
</button>
<span>
</span>
<div class="_2cLHw">Cerca o inizia una nuova chat</div>
<label class="_2MSJr">
<input value="" title="Cerca o inizia una nuova chat" dir="auto" data-tab="2" class="jN-F5 copyable-text selectable-text" type="text">
</label>
</div>
Up until Friday everything worked great. I also updated the webdriver at 2.42 and chrome was updated to 69.
how can I do?
As per the HTML you have shared the element is a dynamic element so you have to induce Wait for the element to be clickable and you can use the following solutions:
bot.wait 4000
bot.FindElementByXPath("//input[contains(#class,'copyable-text selectable-text') and #title='Cerca o inizia una nuova chat']").Click
Note: As an enhancement you need to replae the wait by WebDriverWait
Related
i try to create a simple test who :
click on button
show if dropdown is open
i try to simulate a click with trigger but it is not working,
do you have any idea what i am doing wrong?
describe('test clique boutton filtre', () => {
test('should show dropdown de la colonne 1', async (done) => {
const dropdown = wrapper.find('#nom-divUpperDrop')
const button = wrapper.find('#nom-dropdown')
await button.trigger('click')
expect(dropdown.findAll('.show').length).equal(1)
done()
})
})
i'am sure i find the button because the console log show :
<button type="button" id="nom-dropdown" data-bs-toggle="dropdown" aria-bs-haspopup="true" aria-bs-expanded="false" data-bs-offset="-60,10" data-bs-auto-close="outside" class="nav-icon clear-btn">
<p> false </p>
</button>
here the dropdown where i want to find the .show
> <div aria-labelledby="nom-dropdown" class="dropdown-menu">
> <div>
> <div class="filter-deroulant">
> <!---->
> <div class="filter-input">
> <div class="input-group mb-3"><input type="text" id="filtre_0" value="" placeholder="Recherche par nom"
> aria-label="Rechercher" aria-describedby="nom" class="form-control col
> form-control-sm"> <button type="button" id="nom" class="btn
> btn-outline-secondary"><svg aria-hidden="true" focusable="false"
> data-prefix="fas" data-icon="search" role="img"
> xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
> aria-expanded="false" class="svg-inline--fa fa-search fa-w-16">
> <path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0
> 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4
> 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
> class=""></path>
> </svg></button></div>
> </div>
> </div>
> </div>
> <div>
Any idea?
ps: i tried this : Vue Testing (JEST): button.trigger('click') not working
ps: I tried the button manually, it's work :)
but it's not working for me
I have a page opened in selenium VBA, and on this page I have a lot of elements with the same class name, So, how i can update the inputs" element by element using a for a loop until it reaches the element
<div class="jss10">
<div class="jss11">
<label class="jss16">Auction Name</label><span class="jss13">*</span>
<div class="jss12"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" title="Auction name" style="width: 20px; height: 20px; color: gray;"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></div></div><div class="jss14"><div class="MuiFormControl-root MuiTextField-root"><div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"><input aria-invalid="false" type="text" class="MuiInputBase-input MuiOutlinedInput-input" value=""><fieldset aria-hidden="true" class="jss17 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;"><legend class="jss18" style="width: 0.01px;"><span></span></legend></fieldset></div></div></div></div>
<div class="jss10">
<div class="jss11">
<label class="jss16">Invited Suppliers</label>
<span class="jss13">*</span>
<div class="jss12"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" title="Total suppliers invited for the Auction" style="width: 20px; height: 20px; color: gray;"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></div></div><div class="jss14"><div class="MuiFormControl-root MuiTextField-root"><div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"><input aria-invalid="false" type="number" class="MuiInputBase-input MuiOutlinedInput-input" value=""><fieldset aria-hidden="true" class="jss17 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;"><legend class="jss18" style="width: 0.01px;"><span></span></legend></fieldset></div></div></div></div>
<div class="jss10">
<div class="jss11">
<label class="jss16">Sellers Without Initial Bid</label>
<span class="jss13">*</span>
<div class="jss12"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true" style="width: 20px; height: 20px; color: gray;"><path d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path></svg></div></div><div class="jss14"><div class="MuiFormControl-root MuiTextField-root"><div class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-formControl"><input aria-invalid="false" type="number" class="MuiInputBase-input MuiOutlinedInput-input" value=""><fieldset aria-hidden="true" class="jss17 MuiOutlinedInput-notchedOutline" style="padding-left: 8px;"><legend class="jss18" style="width: 0.01px;"><span></span></legend></fieldset></div></div></div></div>
I have a list-group with icons and links. My goal is to only show the icons when the screen is smaller than lg and change the orientation from vertical to horizontal.
So far I've managed to only show the icons on screens smaller than lg; however, I'm struggling to figure out how to dynamically change the orientation from verticle to horizontal for screens smaller than lg. How do I achieve this?
code:
<template>
<div>
<b-container>
<b-row>
<b-col class="col-md-6 col-xl-3">
<b-list-group>
<b-list-group-item>
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="d-none d-lg-block">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item>
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="d-none d-lg-block">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-md-6 col-xl-9">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: ''
}
},
}
</script>
<style scoped>
</style>
EDIT:
I attempted to figure this out and tried all of the responsive variants:
<b-list-group horizontal="sm">, <b-list-group horizontal="md">, and <b-list-group horizontal="xl"> All of them are not working as expected. The list-group is horizontal on all screen sizes but sm
Code that I tried:
<template>
<div>
<b-container>
<b-row>
<b-col class="col-md-6 col-xl-3" >
<b-list-group >
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="d-none d-lg-block">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item>
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="d-none d-lg-block">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-md-6 col-xl-9">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: 'product-list'
}
},
}
</script>
<style scoped>
/* small screen below 992px width */
#media only screen and (max-width : 991px) {
.d-none{display:none;}
}
/* large screen above 991px width */
#media only screen and (min-width : 992px) {
.d-lg-vertical{
display:block;
}
}
</style>
You can do like this -
Template
<div class="container">
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-12 col-xs-12">
<b-list-group>
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="custom-sm-d-none">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item class="d-lg-vertical">
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="custom-sm-d-none">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</div>
<div class="col-xl-9 col-lg-8 col-md-8 col-sm-12 col-xs-12">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</div>
</div>
</div>
CSS
/* small screen below 768px width */
#media only screen and (max-width : 767px) {
.custom-sm-d-none{display:none;}
}
/* large screen above 767px width */
#media only screen and (min-width : 768px) {
.d-lg-vertical{
display:block;
}
}
fiddle -
https://jsfiddle.net/guruling/f9m1v0so/33/
Hope it will resolve your issue.
I figured this out. Thank you #GurulingKumbhar for helping me get to this point by mentioning #media rules which got me delving deeper into how all of this stuff works and then I stumbled upon flexbox.
<template>
<div>
<b-container>
<b-row>
<b-col class="col-md-6 col-xl-3">
<b-list-group id="" class="d-flex horiz">
<b-list-group-item>
<b-link v-on:click="component = 'product-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM8 19h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zm0-6h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1s.45 1 1 1zM7 6c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H8c-.55 0-1 .45-1 1z"/>
</svg>
<span class="hide-title">Material List</span>
</b-link>
</b-list-group-item>
<b-list-group-item>
<b-link v-on:click="component = 'batch-create-material-list'">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
<path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 9h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h4c.55 0 1-.45 1-1s-.45-1-1-1h-4c-.55 0-1 .45-1 1s.45 1 1 1zM7 7h2v2H7zm0 4h2v2H7zm0 4h2v2H7zM20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z"/>
</svg>
<span class="hide-title">Batch Create Material List</span>
</b-link>
</b-list-group-item>
</b-list-group>
</b-col>
<b-col class="col-md-6 col-xl-9">
<keep-alive>
<component v-bind:is="component"></component>
</keep-alive>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import ProductList from '../../components/admin/ProductList';
import CreateProductAndCategory from '../../components/admin/CreateProductAndCategory';
export default {
name: 'Dashboard',
components: {
'product-list': ProductList,
'batch-create-material-list': CreateProductAndCategory,
},
data() {
return {
component: 'product-list',
}
},
}
</script>
<style scoped>
/* small screen below 992px width */
#media only screen and (max-width : 992px) {
.horiz {
flex-direction: row;
}
.hide-title {
display:none;
}
}
</style>
I'm new to VueJS so I decided to use it for a small project. I needed to validate client entries..I googled and found vee-validate would be appropriate for my style of creating a component so I used the style found in this post https://jsfiddle.net/787g7q0e/ Below are the steps I took to reproduce the error I got.
First, I installed the vee-validate via a CDN link like so:
<script src="~/Scripts/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate#latest/dist/vee-validate.js"></script>
<script src="~/Scripts/FrontEnd/Layout/Main.js"></script>
in my Layout file for APS.NET MVC
Secondly, following https://jsfiddle.net/787g7q0e/, I registered and used vee-validate like so:
const config = {
aria: false,
classNames: {},
classes: false,
delay: 0,
errorBagName: 'errors',
events: 'input|blur',
fieldsBagName: 'fields',
i18n: null,
i18nRootKey: 'validations',
inject: true,
locale: 'en',
strict: true,
validity: false
}
Vue.use(VeeValidate, config);
Vue.component('loan-calc', {
template: `<div class="row calc-holder" data-aos="fade-up" data-aos-delay="800">
<form>
<div class="wrap">
<div class="card_one">
<label for="">Loan Amount</label>
<p>The amount you want to take</p>
<div class="loan-amount-form">
<i class="icon naira">
<svg width="15"
height="13"
viewBox="0 0 15 13"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M14.814 5.764H13.302V7.726H14.814V9.22H13.302V13H11.286L8.244 9.22H4.716V13H2.232V9.22H0.684V7.726H2.232V5.764H0.684V4.288H2.232V0.219999H4.158L7.38 4.288H10.818V0.237999H13.302V4.288H14.814V5.764ZM4.716 7.726H7.056L5.472 5.764H4.716V7.726ZM10.116 7.726H10.818V5.764H8.55L10.116 7.726Z"
fill="#03293D" />
</svg>
</i>
<input
type="text"
name="LoanAmount"
v-validate="'required'"
v-model="LoanAmount"/>
<i class="icon pencil">
<svg width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z"
fill="#03293D" />
</svg>
</i>
</div>
</div>
</div>
</form>
</div>`,
data() {
return {
LoanAmount: null,
LoanTenure: null,
RepaymentType: null,
Repayment: null
}
}
})
From the above template, I tried using vee-validate to validate the required field like so:
<input
type="text"
name="LoanAmount"
v-validate="'required'"
v-model="LoanAmount"/>
<i class="icon pencil">
<svg width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4"
d="M10 0C4.47 0 0 4.47 0 10C0 15.53 4.47 20 10 20C15.53 20 20 15.53 20 10C20 4.47 15.53 0 10 0ZM13.1035 5.0684C13.2435 5.0684 13.3833 5.1224 13.4883 5.2324L14.7676 6.5117C14.9876 6.7217 14.9876 7.0732 14.7676 7.2832L13.7676 8.2812L11.7188 6.2324L12.7188 5.2324C12.8237 5.1224 12.9635 5.0684 13.1035 5.0684ZM11.1289 6.8145L13.1875 8.8711L7.12891 14.9316H5.06836V12.8711L11.1289 6.8145Z"
fill="#03293D" />
Kindly help or show me how I can resolve the above error and use vee-validate effectively.
I am using selenium using Robot Framework I'm getting
xpath is invalid: TypeError: The expression cannot be converted to return the specified type.
The code I used is
Set Test Variable ${xpathIP} xpath=//ul/li/div[#class="segmentName"]
${IPSegmentsCnt}= Get Matching Xpath Count ${xpathIP}
Log ${IPSegmentsCnt}
:For ${i} IN RANGE 1 ${IPSegmentsCnt} + 1
\ ${name}= Get Text xpath=(${xpathIP})[${i}]
\ Log ${name}
\ Should Not Match Regexp ${name} \\(DS:.+\\)
I'm not getting what exactly the error is...
HTML:
<li _ngcontent-ats-90="">
<span _ngcontent-ats-90="" ng-reflect-class-name="arrow collapse-false" class="arrow collapse-false"></span>
<md-checkbox _ngcontent-ats-90="" class="mat-accent mat-checkbox ng-untouched ng-pristine ng-valid" ng-reflect-name="4INFO IP Segments"><label class="mat-checkbox-layout"><div class="mat-checkbox-inner-container"><input class="mat-checkbox-input cdk-visually-hidden" type="checkbox" ng-reflect-id="input-md-checkbox-1" id="input-md-checkbox-1" ng-reflect-name="4INFO IP Segments" name="4INFO IP Segments" tabindex="0" aria-label="">
<div class="mat-checkbox-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLElement]" ng-reflect-centered="true" ng-reflect-speed-factor="0.3"></div><div class="mat-checkbox-frame"></div><div class="mat-checkbox-background"><svg xml:space="preserve" class="mat-checkbox-checkmark" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="mat-checkbox-checkmark-path" d="M4.1,12.7 9,17.6 20.3,6.3" fill="none" stroke="white"></path></svg><div class="mat-checkbox-mixedmark"></div></div></div><span class="mat-checkbox-label">
</span></label></md-checkbox>
<div _ngcontent-ats-90="" class="datasourceName">4INFO IP Segments false</div>
<ul _ngcontent-ats-90="">
<li _ngcontent-ats-90="">
<md-checkbox _ngcontent-ats-90="" class="mat-accent mat-checkbox ng-untouched ng-pristine ng-valid" ng-reflect-name="4Info_Age_18-30"><label class="mat-checkbox-layout"><div class="mat-checkbox-inner-container"><input class="mat-checkbox-input cdk-visually-hidden" type="checkbox" ng-reflect-id="input-md-checkbox-2" id="input-md-checkbox-2" ng-reflect-name="4Info_Age_18-30" name="4Info_Age_18-30" tabindex="0" aria-label=""><div class="mat-checkbox-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLElement]" ng-reflect-centered="true" ng-reflect-speed-factor="0.3"></div><div class="mat-checkbox-frame"></div><div class="mat-checkbox-background"><svg xml:space="preserve" class="mat-checkbox-checkmark" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="mat-checkbox-checkmark-path" d="M4.1,12.7 9,17.6 20.3,6.3" fill="none" stroke="white"></path></svg><div class="mat-checkbox-mixedmark"></div></div></div><span class="mat-checkbox-label">
</span></label></md-checkbox>
<div _ngcontent-ats-90="" class="segmentName">4Info_Age_18-30 (DS: 0) (CPM: $1.00)</div>
</li><li _ngcontent-ats-90="">
<md-checkbox _ngcontent-ats-90="" class="mat-accent mat-checkbox ng-untouched ng-pristine ng-valid" ng-reflect-name="4Info_Age_35_and_over"><label class="mat-checkbox-layout"><div class="mat-checkbox-inner-container"><input class="mat-checkbox-input cdk-visually-hidden" type="checkbox" ng-reflect-id="input-md-checkbox-3" id="input-md-checkbox-3" ng-reflect-name="4Info_Age_35_and_over" name="4Info_Age_35_and_over" tabindex="0" aria-label=""><div class="mat-checkbox-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLElement]" ng-reflect-centered="true" ng-reflect-speed-factor="0.3"></div><div class="mat-checkbox-frame"></div><div class="mat-checkbox-background"><svg xml:space="preserve" class="mat-checkbox-checkmark" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="mat-checkbox-checkmark-path" d="M4.1,12.7 9,17.6 20.3,6.3" fill="none" stroke="white"></path></svg><div class="mat-checkbox-mixedmark"></div></div></div><span class="mat-checkbox-label">
</span></label></md-checkbox>
<div _ngcontent-ats-90="" class="segmentName">4Info_Age_35_and_over (DS: 0) (CPM: $1.00)</div>
</li><li _ngcontent-ats-90="">
<md-checkbox _ngcontent-ats-90="" class="mat-accent mat-checkbox ng-untouched ng-pristine ng-valid" ng-reflect-name="4Info_Age_50_plus"><label class="mat-checkbox-layout"><div class="mat-checkbox-inner-container"><input class="mat-checkbox-input cdk-visually-hidden" type="checkbox" ng-reflect-id="input-md-checkbox-4" id="input-md-checkbox-4" ng-reflect-name="4Info_Age_50_plus" name="4Info_Age_50_plus" tabindex="0" aria-label=""><div class="mat-checkbox-ripple mat-ripple" md-ripple="" ng-reflect-trigger="[object HTMLElement]" ng-reflect-centered="true" ng-reflect-speed-factor="0.3"></div><div class="mat-checkbox-frame"></div><div class="mat-checkbox-background"><svg xml:space="preserve" class="mat-checkbox-checkmark" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path class="mat-checkbox-checkmark-path" d="M4.1,12.7 9,17.6 20.3,6.3" fill="none" stroke="white"></path></svg><div class="mat-checkbox-mixedmark"></div></div></div><span class="mat-checkbox-label">
</span></label></md-checkbox>
<div _ngcontent-ats-90="" class="segmentName">4Info_Age_50_plus (DS: 0) (CPM: $1.00)</div>
</li><li _ngcontent-ats-90="">
</ul>
</li>
I tried multiple times that wasn't worked
The problem could be that you are assigning the xpath twice so ${name} looks for something like this xpath=xpath='yourxpath'
Change
${IPSegmentsCnt}= Get Matching Xpath Count ${xpathIP}
Set Test Variable ${xpathIP} xpath=//ul/li/div[#class="segmentName"]
to
Set Test Variable ${xpathIP} //ul/li/div[#class="segmentName"]
${IPSegmentsCnt}= Get Matching Xpath Count xpath=${xpathIP}