OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Playwright/Javascript: Assert a specific element is PRESENT within a specific div

  • Thread starter Thread starter marsknows
  • Start date Start date
M

marsknows

Guest
Using a Playwright/Javascript framework, I am trying to validate a specific element "Draft project brief" card IS PRESENT within the specific "To Do" column. "Draft" card should be present in "To do" column Here is the DOM file with the "Draft" card highlighted. "Draft" card HTML Another look at the DOM file showing the "To Do" column highlighted. "To Do" column with "Draft" card nested

First, I tried .toContain(), but it looks like it is comparing the two elements against each other and not asserting if the draftCard element is present within toDoColumn. tried .toContain() Second, I tried .not.toBeNull(), and test is passing, but when I intentionally switch the wrong column ("Done") to be sure, it is still passing. So that tells me this method is not accurately checking if the card is in the correct column. tried not.toBeNull() Third, I tried this method I had seen on an online forum, but it was also giving me a false positive. It would pass when I put the correct column, and it was also pass when I put the incorrect column. tried .locator() Lastly, I tried .toHaveAttribute(), but this seems to only check the exact given top div element, and does not check the child elements of the div. tried .toHaveAttribute()

I am a bit new to Playwright/Javascript so any advice would be much appreciated!!


Code:
const { test, expect } = require('@playwright/test');
    test('Loop test', async ({ page }) => {
    await test.step('Login to Asana', async () => {
  await page.goto('https://app.asana.com/-/login');
  await page.getByLabel('Email address').fill('[email protected]');
  await page.getByRole('button', { name: 'Continue', exact: true }).click();
  await page.getByLabel('Password', { exact: true }).fill('Password123');
  await page.getByRole('button', { name: 'Log in' }).click();
  await page.waitForLoadState('networkidle');
  const homeURL = page.url();
  expect(homeURL).toBe('https://app.asana.com/0/home/1205366998147150');

    });

    await test.step('Navigate to the project page', async () => {
        await page.getByRole('link', { name: 'Cross-functional project plan, Project', exact: true }).click();
        const projectURL = page.url();
        expect(projectURL).toBe('https://app.asana.com/0/1205367008165973/1205366758273574');
      });

This is the step I am having trouble with..

Code:
await test.step('Verify the card is within the right column', async () => {
            const toDoColumn = await page.locator("(//div[@class='BoardBody-columnDraggableItemWrapper SortableList-sortableItemContainer'])[2]");
            const draftCard = await page.locator("//span[text()='Draft project brief']");
            await expect(toDoColumn).toHaveAttribute(draftCard);
          });
    });

<p>Using a Playwright/Javascript framework, I am trying to validate a specific element "Draft project brief" card IS PRESENT within the specific "To Do" column.
<a href="https://i.sstatic.net/jtRorQRF.png" rel="nofollow noreferrer">"Draft" card should be present in "To do" column</a>
Here is the DOM file with the "Draft" card highlighted.
<a href="https://i.sstatic.net/pBzzSDuf.png" rel="nofollow noreferrer">"Draft" card HTML</a>
Another look at the DOM file showing the "To Do" column highlighted.
<a href="https://i.sstatic.net/e8XjH5uv.png" rel="nofollow noreferrer">"To Do" column with "Draft" card nested</a></p>
<p>First, I tried .toContain(), but it looks like it is comparing the two elements against each other and not asserting if the draftCard element is present within toDoColumn.
<a href="https://i.sstatic.net/4HXmWFLj.png" rel="nofollow noreferrer">tried .toContain()</a>
Second, I tried .not.toBeNull(), and test is passing, but when I intentionally switch the wrong column ("Done") to be sure, it is still passing. So that tells me this method is not accurately checking if the card is in the correct column.
<a href="https://i.sstatic.net/fcmEsE6t.png" rel="nofollow noreferrer">tried not.toBeNull()</a>
Third, I tried this method I had seen on an online forum, but it was also giving me a false positive. It would pass when I put the correct column, and it was also pass when I put the incorrect column.
<a href="https://i.sstatic.net/fSr8T56t.png" rel="nofollow noreferrer">tried .locator()</a>
Lastly, I tried .toHaveAttribute(), but this seems to only check the exact given top div element, and does not check the child elements of the div.
<a href="https://i.sstatic.net/p0GiUUfg.png" rel="nofollow noreferrer">tried .toHaveAttribute()</a></p>
<p>I am a bit new to Playwright/Javascript so any advice would be much appreciated!!</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const { test, expect } = require('@playwright/test');
test('Loop test', async ({ page }) => {
await test.step('Login to Asana', async () => {
await page.goto('https://app.asana.com/-/login');
await page.getByLabel('Email address').fill('[email protected]');
await page.getByRole('button', { name: 'Continue', exact: true }).click();
await page.getByLabel('Password', { exact: true }).fill('Password123');
await page.getByRole('button', { name: 'Log in' }).click();
await page.waitForLoadState('networkidle');
const homeURL = page.url();
expect(homeURL).toBe('https://app.asana.com/0/home/1205366998147150');

});

await test.step('Navigate to the project page', async () => {
await page.getByRole('link', { name: 'Cross-functional project plan, Project', exact: true }).click();
const projectURL = page.url();
expect(projectURL).toBe('https://app.asana.com/0/1205367008165973/1205366758273574');
});

</code></pre>
</div>
</div>
</p>
<p>This is the step I am having trouble with..
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>await test.step('Verify the card is within the right column', async () => {
const toDoColumn = await page.locator("(//div[@class='BoardBody-columnDraggableItemWrapper SortableList-sortableItemContainer'])[2]");
const draftCard = await page.locator("//span[text()='Draft project brief']");
await expect(toDoColumn).toHaveAttribute(draftCard);
});
});</code></pre>
</div>
</div>
</p>
 
Top