I've written 12 tests in total so far for this project and there is one error that is occurring in different places depending on the tests composition.
My question is about how to debug this issue. I'll share the error and the test sample in hope that someone else had a similar problem and has an idea on how to approach it.
The Uncaught TypeError: Cannot read property 'type' of undefined is the error in question, and there is no reference to the where it occurred.
From the tests perspective, the next action was supposed to be clicking a button and getting a popup for creating a new product.
The application works correctly and without problems, it's just the e2e tests that report the problem.
The reported test in question works in isolation. Excluding this test, the error manifests on another test.
At the end of this post, you'll be able to see the error thrown when this test is skipped.
fixture('Select a product from the list:')
.page('http://localhost:3000/products');
// @TODO Fix e2e test
test
.before(generateProducts(page, 1))
('clicking the "Close detail" button should return us to the products page.', async t => {
const productsListItem = await page.listContainer.child(0);
await t
.click(productsListItem)
.click(page.closeDetail)
.expect(page.productsPageTitle.innerText).eql('PRODUCTS')
})
.after(removeGeneratedProducts(detailedProductPage, 1));
test
.before(generateProducts(page, 2))
('selecting another product, while the previous is still opened, should refresh the preview with the new selection.', async(t) => {
const productListItems = await page.listContainer.find('li');
const productsListItem0 = await productListItems.nth(0);
const productsListItem0Title = await productsListItem0.find('[data-test-id="name"]').innerText;
const productsListItem1 = await productListItems.nth(1);
const productsListItem1Title = await productsListItem1.find('[data-test-id="name"]').innerText;
await t
.click(productsListItem0)
.expect(page.productTitle.textContent).eql(productsListItem0Title || 'Missing product\'s name')
.click(productsListItem1)
.expect(page.productTitle.textContent).eql(productsListItem1Title || 'Missing product\'s name')
})
.after(removeGeneratedProducts(detailedProductPage, 2));
fixture('Field state updating when switching between products with an open Quick Edit view')
.page('http://localhost:3000/products');
test
.before(async t => {
await t
.click(page.showAddProductFormButton)
.typeText(page.nameField, `${chance.name()} ${Math.floor(Math.random() * 100000) + 1}`)
.click(page.createNewProductButton)
.click(page.showAddProductFormButton)
.click(page.createNewProductButton);
})
('Products quick edit navigation should update the view, and not inherit the values of the previous product', async(t) => {
const productListItems = await page.listContainer.find('li');
const productsListItem0 = await productListItems.nth(0);
const productsListItem1 = await productListItems.nth(1);
await t
.click(productsListItem0)
.expect(page.productTitle.textContent).eql('Missing product\'s name')
.click(productsListItem1)
.click(productsListItem0)
.click(productsListItem1)
.click(productsListItem0)
.expect(page.productTitle.textContent).eql('Missing product\'s name')
.click(productsListItem0)
})
.after(removeGeneratedProducts(detailedProductPage, 2));Don't expect results when running the code. I've used this feature to nicely import the code, nothing more.The same error on a different test when the original test is skipped.
