Automated UI Test for SharePoint Solutions

On this page, you can find some related references for the “Automated UI Test for SharePoint Solutions” session which Elio presented together with Melanie Culver.

Feedback

If you want, you can provide feedback via the following form: feedback form.

Link to the slides of where the session was presented

2-5 December 2019 – European SharePoint, Office 365 & Azure Conference

Useful links

Tools

Recorders

Other Tools

Code snippets

node-sp-auth authentication for Puppeteer

1
2
3
4
5
import * as spauth from 'node-sp-auth';
const data = await spauth.getAuth(pageUrl, {
  username: username,
  password: password
});

Combining Puppeteer and Jest

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
test('Should load the page', async (done) => {
  if (page) {
    await page.goto(configObj.pageUrl, {
      waitUntil: 'networkidle0’
    });
    expect(page).not.toBeNull();
    expect(await page.title()).not.toBeNull();
    expect(await page.title()).toBe("Automated UI Tests - Home");
    done();
  }
}, 30000);

/**
 * Start of the other page tests
 */
test('Check if caption element is present in the web part', async (done) => {
  const elm = await page.$('.caption’);
  expect(elm).not.toBeNull();
  done();
}, 5000);

HTML sample for testing with custom attributes

1
2
3
4
5
6
7
8
<div className={styles.caption} data-ui-test-id="caption">
  <p data-ui-test-id="caption-title">
    <b>{item.title}</b>
  </p>
  <p data-ui-test-id="caption-description">
    <i>{item.description}</i>
  </p>
</div>

The test code:

1
2
3
4
5
6
7
/**
 * Start of the other page tests
 */
test('Check if caption element is present in the web part', async (done) => {
  const caption = await page.$('div[data-ui-test-id="caption"]’);
  expect(caption).not.toBeNull();  done();
}, 5000);

Session: Automated UI Test for SharePoint Solutions