I am facing an issue where I want to include an HTML data-xxxx attribute to the HTML <table> within a v-simple-table. However, when I add the data attribute to the <v-simple-table>, it ends up being placed in a surrounding div two levels above the actual <table>.
I rely on data attributes for targeting components in my testing framework. In my Page Object Model (POM), I would ideally like to do:
get tableResultsAvailable () {
return $('table[data-qaid="results_available-panel"]');
}
In one of my pages, I might have something like this:
<v-skeleton-loader v-if="loading" type="table-tbody"
:types="{ 'table-tbody': 'table-row-divider@4', 'table-row': 'table-cell@3', }"/>
<v-simple-table v-else data-qaid="results_available-panel">
<thead>
When writing test specifications, I may need to wait for the table to load:
await expect(MyAccountPage.tableResultsAvailable).toBeDisplayed()
However, the data attribute is actually attached to a div instead of the table:
<div data-v-b386ddc8="" class="v-data-table v-data-table--fixed-height theme--light" data-qaid="results_available-panel">
<div class="v-data-table__wrapper" style="height: 395px;">
<table>
<thead data-v-b386ddc8="">
This forces me to use a broader selector in my POM such as
'[data-qaid="results_available-panel"]''div[data-qaid="results_available-panel"]'I am contemplating using the default slot to override the entire table definition, but that feels like an excessive solution. Additionally, I have observed that CSS classes are also applied to the wrapper in a similar manner.