reactjs - Testing react application - POM vs COM - Stack Overflow

admin管理员组

文章数量:1122832

I'm setting up a Test automation framework, making a strategy, e.t.c for a hobby project at home to improve my test best practices.

I know that Page object models (POM) is great for integration/end to end testing, where there may be many test cases using the same page.

I know that Component object models (COM) is great for unit testing a reuseable component where again, there may be many test cases

Both POM/COM improve maintainability of the test locators, epxected functionality e.t.c giving a single source to refactor tests in.

I just found some information on COM's in seleniums documentation (theyr calling it Page Component Objects, maybe a more correct term?)

they're saying we can include COMs in POMs.

Question is: Im using Jest and i guess that i can include COMs in POMs there aswell, the ideology being pretty neutral. So in Jest when and why should i include COMs in POMs?

if i have the following homepage component test

it("Homepage continue as guest works", ()=>{
  const {queryByLabelText, getByLabelText} = render(
    <HomePage/>
  );
fireEvent.click(getByLabelText(/continue as guest/i)); // find and click guest button
expect(queryByLabelText(/Welcome guest/i)).toBeTruthy(); // the text after guest login
});

, do i understand it correctly that i could make that HomePage test a POM, and each component inside (e.g. generic button component thats clicked to continue as guest) a COM used in the POM ?

so benefit here would be that i could reuse the COM logic in a POM integration/end to end test so i dont have to update/maintain POM locators for components inside.

i hope the question makes sense, its more verify if i understand it correct than a actual answer/solution that im seeking here.

thanks in advance.

online research, expected clarity if the idea im working on is actually proven good practice

I'm setting up a Test automation framework, making a strategy, e.t.c for a hobby project at home to improve my test best practices.

I know that Page object models (POM) is great for integration/end to end testing, where there may be many test cases using the same page.

I know that Component object models (COM) is great for unit testing a reuseable component where again, there may be many test cases

Both POM/COM improve maintainability of the test locators, epxected functionality e.t.c giving a single source to refactor tests in.

I just found some information on COM's in seleniums documentation (theyr calling it Page Component Objects, maybe a more correct term?)

they're saying we can include COMs in POMs.

Question is: Im using Jest and i guess that i can include COMs in POMs there aswell, the ideology being pretty neutral. So in Jest when and why should i include COMs in POMs?

if i have the following homepage component test

it("Homepage continue as guest works", ()=>{
  const {queryByLabelText, getByLabelText} = render(
    <HomePage/>
  );
fireEvent.click(getByLabelText(/continue as guest/i)); // find and click guest button
expect(queryByLabelText(/Welcome guest/i)).toBeTruthy(); // the text after guest login
});

, do i understand it correctly that i could make that HomePage test a POM, and each component inside (e.g. generic button component thats clicked to continue as guest) a COM used in the POM ?

so benefit here would be that i could reuse the COM logic in a POM integration/end to end test so i dont have to update/maintain POM locators for components inside.

i hope the question makes sense, its more verify if i understand it correct than a actual answer/solution that im seeking here.

thanks in advance.

online research, expected clarity if the idea im working on is actually proven good practice

• reactjs
• selenium-webdriver
• automation
• jestjs

Share Improve this question Follow edited Nov 22, 2024 at 14:01 hardkoded 21.5k33 gold badges6060 silver badges7474 bronze badges asked Nov 22, 2024 at 13:53 robskaarrobskaar 52555 silver badges1818 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Yes, you understand it right.

Let's say you have page with page with form. You can create COM for non trivial UI components, for example custom Select control.

And when you create POM, you include COMs for necessary fields.

本文标签： reactjsTesting react applicationPOM vs COMStack Overflow