Is it possible to use to use the DOM Testing library to do end to end testing for react applications

Question

I am working on writing end to end tests for a react application using Selenium and Protractor. I was wondering if there is a way to use the Testing library to access elements from the DOM (in a real browser).

Answer 1

conf.js

exports.config = {
  framework: 'jasmine',
  directConnect: true,
  specs: ['spec.js'],
  capabilities :{
    browserName: 'chrome',
    chromeOptions: {
      binary: '/Applications/Chrome.app/Contents/MacOS/Google Chrome'
    }
  },

  plugins: [
    {
    // The module name
    package: "protractor-react-selector"
    }
 ],

  beforeLaunch: async () => {

  },

  onPrepare: async () => {
    await browser.waitForAngularEnabled(false)
  }
}

spec.js

const { browser } = require("protractor");

describe('Protractor Demo App', function() {
  it('test react', async function() {
    console.log(`wait at ${new Date()}`)
    await browser.get('https://ahfarmer.github.io/calculator/');
    console.log(`wait at ${new Date()}`)
    await browser.waitForReact(500)
    console.log(`done at ${new Date()}`)
    // await $('button[aria-label="Close modal"]').click()
    const btn7 = element(by.react('t', {name: "7"}))
    const btn8 = element(by.react('t', {name: "8"}))
    const plus = element(by.react('t', {name: "+"}))
    const equal = element(by.react('t', {name: "="}))
    await btn7.click()
    await plus.click()
    await btn8.click()
    await equal.click()
    await browser.sleep(5000)

  });
});